September 23, 2014

Weebly Tricks #75 - Ion Calendar and Date Picker

Posted by Domingo Tambasacan at 9/23/2014

Add a calendar and Date Picker to Weebly

A calendar that automatically fits itself on your Weebly site. Whether you want it as large as a whole page or as short as your sidebar, this calendar will do the job for you. Plus, it has also a date picker which can be customized depending on your preferences.




Thanks to Denis Ineshin for this calendar which can be easily added on our Weebly site. There is no hard coding required.


FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/moment.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/ion.calendar.js"></script>

<script>
  $("#myCalendar-1,#myCalendar-2,#myCalendar-3 ").ionCalendar();
</script>

Notes:
Red text - Change with your site address.


HEADER CODE
Where to place these codes? Click Here!


<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/ion.calendar.css">

Note:
Red text - Change with your site address again.


BODY CODE
Where to place these codes? Click Here!


<div class="myCalendar" id="myCalendar-1"></div>


CONCLUSION





More functions available includes other languages support, changing the first day of the week and the span of years. If you have hard time applying this calendar on your site, please visit the forum and post your questions.

This tutorial uses one of the "10 Capsulated Tips".



Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

  1. I sent you message on facebook regarding how to use only japanese language and adding events on some days. thank you in advance for help

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top