Sunday, 14 September 2014

Tagged under: , ,

How to insert a calendar in a post ?

how to insert a calendar
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 :


How to insert the ProBloggerTricks 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 probloggertricks calendar##################### -->
<link href='https://c2504d423f630716dd44709fad1630f8db1c1d91.googledrive.com/host/0B8w-DyA2IWavTGJrVE02SGZ4RWM/calendar.css' rel='stylesheet' type='text/css'/>


Here is an example:

How to nsert a calendar

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:




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




Good luck.


9 comments:

  1. Your post helped me to learn a lot. Thanks for the awesome Post!!

    ReplyDelete
  2. I'll try adding this on my blog once I get my hands on a PC. having a calender within post would be pretty cool. Another <a href="detutor.com> blogger widget </a> one can use to improve their blog's design

    ReplyDelete
  3. Perfect guide for inserting calendar in post so thanks for it.
    adsense plugin

    ReplyDelete
  4. I must say you have done a great job with this. In addition , the blog loads super fast for me personally on Chrome. Excellent Weblog! free amazon gift cards

    ReplyDelete
  5. help is very much appreciated.|
    Greetings! Very useful advice in this particular post!

    driver

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism