How To Insert Calendar In Blogger Posts

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?

Actually there are 2 methods of presenting a list of dates.


 You can either list dates :

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

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

September 2014
Mon	Tue	Wed	Thu	Fri	Sat	Sun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

October 2014
Mon	Tue	Wed	Thu	Fri	Sat	Sun
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

How To Insert The Javascript Calendar In A Post ?

1) Add A Link To The Calendar Stylesheet:

To do that you have to go to 'Template', 'edit HTML', locate the '<b:skin>' tag and past the following lines before it:

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

Here is an example:

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'/>

3) Add The Calendar To Your Post :

• Edit your post and switch to the html view
• Past 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;">  

Here is the result:

	September 2014
Mon	Tue	Wed	Thu	Fri	Sat	Sun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

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), replaceyes 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().

any query please comment..