How To Insert A Calendar In A Blogger Post ?

How do you display a series of dates? How do you insert a series of dates in a post? Can you take advantage of a series of dates to render your post visually more attractive?

There are 2 way of presenting a list of dates.

You can either list dates like below :

September 25, 2014
September 30, 2014
October 2, 2014
October 11, 2014

or use the free These javascript calendar and display the same list of dates as customized calendars :

Procedure To Insert The Javascript Calendar In A Post ?

Step 1: Add A Link To The Calendar Stylesheet:

To do that

You have to go 'Template',
Click on 'edit HTML',
Locate the '<b:skin>' tag
and Then paste the following lines given below before '<b:skin>'.

<link href='https://c2504d423f630716dd44709fad1630f8db1c1d91.googledrive.com/host/0B8w-DyA2IWavTGJrVE02SGZ4RWM/calendar.css' rel='stylesheet' type='text/css'/>

Step 2: Add A Link To The Calendar Script :

Go to Template
Edit HTML
locate the </b:skin> tag
paste the following line after it (and before </head> tag):

<script src='https://c2504d423f630716dd44709fad1630f8db1c1d91.googledrive.com/host/0B8w-DyA2IWavTGJrVE02SGZ4RWM/calendar.js' type='text/javascript'/>

Step 3: Add The Calendar To Your Post :

Edit your post and switch to the html view
Paste the following code where you want your calendar to be displayed:

<div id="my_calendar" style="clear: both; float: left; margin-left: 150px; width: 230px;"></div>
<script>
var myCalendar = new Calendar() ;
myCalendar.myName = "myCalendar" ;
myCalendar.parentElement = "my_calendar" ;
myCalendar.loadCurrentDate(2014,9,1) ;
myCalendar.changeStyle("blue") ;
myCalendar.allowMonthChange("yes") ;
myCalendar.addDateToHighlight(2014,9,25) ;
myCalendar.addDateToHighlight(2014,9,30) ;
myCalendar.addDateToHighlight(2014,10,2) ;
myCalendar.addDateToHighlight(2014,10,11) ;
myCalendar.display() ;
</script>
<div style="clear: both;">

Let's review the code which is actually simple to customize:

<div id="my_calendar" style="clear: both; float: left; margin-left: 150px; width: 230px;"></div>

The first line is a simple 'placeholder'. The script will attach the calendar to it. If you want to move it to the left, reduce the margin-left. To move towards the right, increase it.

var myCalendar = new Calendar() ;
myCalendar.myName = "myCalendar" ;
myCalendar.parentElement = "my_calendar" ;

The next three lines should not be modified unless you changed the id of the 'placeholder'. In this case you must update the parentElement with the actual id of the 'placeholder'.

myCalendar.loadCurrentDate(2014,9,1) ;

This line specifies the month to display. Replace the year (2014) and the month (9) with the year / month you want to show.

myCalendar.changeStyle("blue") ;

This is where you select the style of the calendar. You have to choose between 3 colors: red, blue, green.

myCalendar.allowMonthChange("yes") ;

This command tells the script to display buttons to allow user to change the month displayed. If you want a static calendar (the month displayed cannot be changed), replace yes with no.

myCalendar.addDateToHighlight(2014,9,25) ;
myCalendar.addDateToHighlight(2014,9,30) ;
myCalendar.addDateToHighlight(2014,10,2) ;
myCalendar.addDateToHighlight(2014,10,11) ;

The addDateToHighlight command is used to define the list of dates to highlight. There are 3 parameters : year, month, day. There is no limit on the number of highlighted dates.

myCalendar.display() ;

Once all the parameters have been defined, just tell the script to display the calendar using the command display().

Tags:

How do you display a series of dates? How do you insert a series of dates in a post? Can you take advantage of a series of dates to render your post visually more attractive?blogger calendar widget,blogger widgets 2018,cute calendar for blogger,event calendar for blogger,cute widgets for blogger,cool html widgets free,blogger widgets,blogger gadget html,clock widget for blogger

TechMasterLab