Jquery Mobile Event Calendar

---

Table of Contents

1. Required assets
2. HTML Structure
3. Initializing Calendar
4. Options

---

A) Required assets - top

The plugin is Utilizing the powerful Jquery Mobile framework to output the Event calendar and listing events.
Included in the package is the 1.3.2 & 1.4.3 version of the script, as there are several CSS differences between the two.

Jquery mobile 1.3.2

			<header>
				<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
				<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
				<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
				
				<!-- We are using https://github.com/phstc/jquery-dateFormat to format events display date -->
				<script type="text/javascript" src="js/formatdate.js"></script>
				
				<link rel="stylesheet" href="css/jqm-cal.css" />
				<script type="text/javascript" src="js/jqm-cal.js"></script>
			</header>
		

Jquery mobile 1.4.3

			<header>
				<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
				<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
				<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.js"></script>
				
				<!-- We are using https://github.com/phstc/jquery-dateFormat to format events display date -->
				<script type="text/javascript" src="js/formatdate.js"></script>
				
				<link rel="stylesheet" href="css/jqm-cal.1.4.css" />
				<script type="text/javascript" src="js/jqm-cal.1.4.js"></script>
			</header>
		

---

B) HTML Structure - top

We create a DIV for the event calendar plugin wrapper (where you would like the calendar to appear.

			<div id="eventCalendar"></div>
		

---

C) Initializing Calendar - top

		
		var MyEventsList = [
			{"eid":"someID 1","name":"My event test 1","start":new Date("2014-02-10T08:00:00.000Z"),"end":new Date("2014-02-10T10:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
			{"eid":"someID 2","name":"My event test 2","start":new Date("2014-02-10T17:00:00.000Z"),"end":new Date("2014-02-10T18:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."},
			{"eid":"someID 3","name":"My event test 3","start":new Date("2014-02-26T08:00:00.000Z"),"end":new Date("2014-02-27T08:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."}
		];
		
		$("#eventCalendar").jqmCalendar({
			events : MyEventsList,
			months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
			days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
			startOfWeek : 1
		});
		
		
		

---

D) Options - top

There are many options that can be preset on init, and plugin code is highly customizable to add more options.

• Open/edit jqm-cal.js
• All defaults options are editable, on init or directly in the jqm-cal.js, depending on what you prefer.

Theming:

• You can use the built in jquery mobile theming trough themeroller, or you can style the calendar trough regular CSS.
• http://api.jquerymobile.com/theme/

Extras:

To listen for click event on eventlist:

                $(".ui-listview").find('.event-item-link').die().live({
                	click: function() {
                    	if ($(this).attr("rel")) {
                        	alert('Clicked event with ID: ' + $(this).attr("rel"));
                        }
                    }
                });
				

To have slide event for your next and previous buttons

               	$('div[dsid="EventCalendar"]').on({
                    	swiperight: function() {
                    		$('#calPreButton').trigger('click');
                        },
                        swipeleft: function() {
                        	$('#calNextButton').trigger('click');
                        },
                });   
                
                

---

Once again, thank you so much for purchasing this item. As we said at the beginning, We'd be glad to help you if you have any questions relating to this item. No guarantees, but we'll do our best to assist :)

Tom

Go To Table of Contents

---