Download Jquery

Jalendar has a few easy way to quickly get started. Firstly you can download jquery 1.10 or newer version from jquery website. And add to jquery file path to your between <head> tag.

After that, you must add jalendar plugin files and folders —/js/ and /style/— to your project and add to that lines you <head> tag again. Between your <head> tag should see like this after these;

    					<head>
	...
	<link rel="stylesheet" href="jalendar/style/jalendar.css" type="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script><!--jQuery-->
	<script type="text/javascript" src="jalendar/js/jalendar.js"></script>
	...
</head>

After these steps, your jalendar plugin is ready. Let's see Jalendar options.

Running plugin

Let's we add javascript function in your .js file for running Jalendar plugin. Id names should be same.
This is the Jalendar Event option. It is default option. You can change that with "type:" parameter from plugin. More info is in the List of properties section.

                        $('#yourId').jalendar();

Basicly you should create a div in your html where you want, add id what you want and add class that named jalendar. This seems like this;

		                        <div id="yourId" class="jalendar"></div>

                        		$('#yourId').jalendar({type: 'selector'});

If you want to use jalendar with an input you should create a div and define class jalendar-input. Then put your input type="text" in .jalendar-input div. And then create a div that class name .jalendar and define your id next to input. This seems like this;

		                        <div class="jalendar-input">
	<input type="text" readonly />
	<div id="yourDemoInput" class="jalendar"></div>
</div>

List of properties

						
customDay:	// You can define date what you want. Calendar will open with this day 
		// (Ex: 31/10/1987) [Default: Today]


color: 		// You can define unlimited color code


color2: 	// You can define unlimited color code


dayWithZero:    // You can use days without zero (Default: true)


monthWithZero:  // You can use months without zero (Default: true)


done:		// This is the callback function. You can run any function when your date selected 
		// (Ex: function() { } )
		// (Info: $('#your-id input.data1').val() is selected day data1, 
		//        and for 'type: range' your selected day data2 is $('#your-id input.data2').val() )
		// [Default: null]


lang: 		// Supports 13 languages. 
		// (Ex: "EN", "TR", "ES", "DE", "FR", "IT", "FIL", "RU", "NL", "ZH", "HI", "PT", "PL") 
		// [Default: "EN"]
		// (Info: English, Türkçe, Espanol, Deutsch, 
		// French, Italian, Filipino, Russian, 
		// Dutch, Chinese, Hindi, Porteguese, Polish)


type: 		// There are 4 different option. 
		// (Ex: "event", "linker", "selector", "range") [Default: event]


customUrl:	// You can define your link on each date 
		// (Ex: "http://yoururl.com/yourpath=") [Available with type: "linker"]


sundayStart:    // You can change week start day for Sunday or Monday
		// [Default: false]


dateType:	// You can change date format. 
		// (Ex: "yyyy-mm-dd", "dd-mm-yyyy", "mm-dd-yyyy", "yyyy-dd-mm") [Default: dd-mm-yyyy]


selectingBeforeToday:	// You can disable selecting and clicking to day which after today
                        // (Ex: true) [Default: false]


selectingAfterToday:    // You can disable selecting and clicking to day which before today
                        // (Ex: true) [Default: false]


dayColor:	// Day colors have unlimited option


titleColor:	// Title color have unlimited option


weekColor: 	// Week names colors have unlimited option


todayColor: 	// Today color have unlimited option

You can define these properties to your jalendar function in javascript. For example;

                                    $('#yourId').jalendar({
    color: '#577e9a', // Unlimited
    color2: '#57c8bf', // Unlimited
    lang: 'TR'
});

HTML properties for Events


<div id="yourId" class="jalendar">
    <div class="added-event" 
    	data-type="holiday"
    	data-type="task" 
    	data-type="event" (default)
    	data-link="http://pikselmatik.com" 
    	data-date="19-11-2015" 
    	data-title="WWDC 13 on San Francisco, LA">
    </div>
    ...
</div>

CSS

You can change width property with:


.jalendar {
    width: 320px !important;
}

Examples

See the Demos

Jalendar Event Jalendar Linker Jalendar Selector Jalendar Range

Jalendar Event

				                                    <div id="yourId" class="jalendar">
    <div class="added-event" data-link="http://google.com" data-date="19-9-2015" data-title="WWDC 13 on San Francisco, LA"></div>
    ...
    <div class="added-event" data-date="1-10-2015" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
</div>

				                                    $('#yourId').jalendar({
    color: '#577e9a', // Unlimited
    color2: '#57c8bf', // Unlimited
    lang: 'TR'
});

Jalendar Event with Input

				                                    <div class="jalendar-input">
	<input type="text" placeholder="Select Event Date" readonly />
	<div id="yourIdInput" class="jalendar">
	    <div class="added-event" data-date="19-9-2015" data-title="WWDC 13 on San Francisco, LA"></div>
	    ...
	    <div class="added-event" data-date="1-10-2015" data-title="Tarkan İstanbul Concert on Harbiye Açık Hava Tiyatrosu"></div>
	</div>
</div>

				                                    $('#yourId').jalendar({
    color: '#577e9a', // Unlimited
    color2: '#57c8bf', // Unlimited
    lang: 'TR'
});

Jalendar Linker

				                                <div id="yourId2" class="jalendar"></div>

				                                $('#yourId2').jalendar({
    color: '#fff',
    type: 'linker',
    customUrl: 'http://yourcustomurl.com/yourcustomurl?var=',
    dateType: 'mm-dd-yyyy',
    titleColor: '#666',
    weekColor: '#EA5C49',
    todayColor: '#EA5C49'
});

Jalendar Selector

				                                <div id="yourId3" class="jalendar"></div>

				                                $('#yourId3').jalendar({
    type: 'selector',
    dateType: 'yyyy-mm-dd'
});

Jalendar Selector with Input

				                                <div class="jalendar-input">
	<input type="text" readonly />
	<div id="yourId3Input" class="jalendar"></div>
</div>

				                                $('#yourId3Input').jalendar({
    type: 'selector',
    dateType: 'yyyy-mm-dd'
});

Jalendar Range

				                                <div id="yourId4" class="jalendar"></div>

				                                $('#yourId4').jalendar({
    color: '#37C4A7',
    type: 'range',
    lang: 'TR'
});

Jalendar Range with Input

				                                <div class="jalendar-input">
	<input type="text" readonly />
	<div id="yourId4Input" class="jalendar"></div>
</div>

				                                $('#yourId4Input').jalendar({
    color: '#37C4A7',
    type: 'range',
    lang: 'TR'
});