Flexcal

Just what the world needs—another date picker

The current incarnation of the jQuery UI datepicker works fine, but I needed something that could handle the Jewish calendar. This is not the same as localizing datepicker to use Hebrew; that just translates the month and day names but uses the same Gregorian calendar as everyone uses. I needed a calendar that could switch between multiple, completely different calendar systems.

The algorithms for converting dates from Jewish to Gregorian are readily available open-source, and the calendar is just a table, and so was born flexcal. In its simplest form, it looks like datepicker:

<span>Using <code>datepicker</code>: </span><input id="date1"/>
<br/>
<span>Using <code>flexcal</code>: </span><input id="date2"/>

$('#date1').datepicker();$('#date2').flexcal();

But it can show multiple calendars and allows localization to different calendar systems:

<span>Jewish/civil calendar: </span><input id="date3"/>

$('#date3').flexcal({
  position: 'bl',
  calendars: ['en', 'jewish', 'he-jewish']
});

Using it requires three files: the styles in flexcal.css, and the javascript in jquery.textpopup.js, and jquery.flexcal.js. It also needs the jQuery UI code and CSS.

It comes with localization for the Jewish calendar system, and a Hebrew localization of that (since that is what I needed), but it can use the jQuery UI datepicker localizations if the appropriate file is included:

<span>English/French calendar: </span><input id="date4"/>

$.getScript('https://cdn.rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-fr.js').then(function(){
	$.datepicker.setDefaults($.datepicker.regional['']); // don't change the datepicker default; we just want to load the localization
	$('#date4').flexcal({
		position: 'rt',
		calendars: [['fr', 'Français'], ['en','Anglais']]
	});
});

It can also use Keith Wood's calendar systems (the picker-mock.js is a stub that allows using the localization from his datepicker without loading the whole datepicker file):

<script src="https://cdn.rawgit.com/dwachss/flexcal/v2.2/jquery.calendars.picker-mock.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/master/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/master/jquery.calendars-ar.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/master/jquery.calendars.islamic.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/master/jquery.calendars.islamic-ar.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/master/jquery.calendars.picker-ar.js"></script>

<span>Islamic calendar: </span><input id="date5"/>

$('#date5').flexcal({
		// the islamic arabic calendar uses long names (with يوم for each one). Use short names instead
	calendars: [
		'en',
		['ar', 'Arabic'],
		['ar-islamic', {dayNamesMin: [
			'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'
		]}]]
});