RendezVous.js

Simple

Render

HTML

				<div rendezvous></div>
			

JavaScript

				// void
			

Css

				/* void */
			

Configurable

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				var settings = { /* ... */ };
				var callback = function(rdv) { /* ... */ };

				$('#rendez-vous').RendezVous(settings, callback);
			

Css

				/* void */
			

Default date

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous({
					inputEmptyByDefault: false,
					defaultDate: {
						day: 1,    // 1 through 31
						month: 1,  // 0 through 11
						year: 2011 // No limits
					}
				});
			

Css

				/* void */
			

Custom language (French here)

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous({
					i18n: {
						calendar: {
							month: {
								previous: 'Mois précédent',
								next:     'Mois suivant',
								up:       'Sélectionner un mois'
							},
							year: {
								previous: 'Année précédente',
								next:     'Année suivante',
								up:       'Sélectionner une année'
							},
							decade: {
								previous: 'Décennie précédente',
								next:     'Décennie suivante',
								up:       'Sélectionner un jour'
							}
						},
						days: {
							abbreviation: {
								monday:    'Lun',
								tuesday:   'Mar',
								wednesday: 'Mer',
								thursday:  'Jeu',
								friday:    'Ven',
								saturday:  'Sam',
								sunday:    'Dim'
							},
							entire: {
								monday:    'Lundi',
								tuesday:   'Mardi',
								wednesday: 'Mercredi',
								thursday:  'Jeudi',
								friday:    'Vendredi',
								saturday:  'Samedi',
								sunday:    'Dimanche'
							}
						},
						months: {
							abbreviation:
							{
								january:   'Jan',
								february:  'Fév',
								march:     'Mar',
								april:     'Avr',
								may:       'Mai',
								june:      'Juin',
								july:      'Juil',
								august:    'Aou',
								september: 'Sep',
								october:   'Oct',
								november:  'Nov',
								december:  'Déc'
							},
							entire: {
								january:   'Janvier',
								february:  'Février',
								march:     'Mars',
								april:     'Avril',
								may:       'Mai',
								june:      'Juin',
								july:      'Juillet',
								august:    'Août',
								september: 'Septembre',
								october:   'Octobre',
								november:  'Novembre',
								december:  'Décembre'
							}
						}
					}
				});
			

Css

				/* void */
			

Fullscreen opening

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous();
			

Css

				#rendez-vous .rendezvous-popup {
					position: fixed;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					background-color: rgba(30, 30, 30, 0.4);
				}
				#rendez-vous .rendezvous-datepicker {
					position: absolute;
					left: 50%;
					top: 50%;
					width: 21em;
					font-size: 1.3em;
					margin-left: -11em;
					margin-top: -8em;
				}
			

Custom date format (e.g. "Thursday 1 January 2015")

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous({
					formats: {
						display: {
							date: '%Day %d %Month %Y'
						}
					}
				});
			

Css

				#rendez-vous .rendezvous-input input {
					width: 180px; /* to fit the result in the input */
				}
			

Input split

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous({
					splitInput: true,
				});
			

Css

				#rendez-vous .rendezvous-input input {
					width: 60px; /* to fit the result in the inputs */
				}
			

Catch events

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous')
					.on('rendezvous-init', function(event, rdv) {
						console.log('rdv-init');
					})
					.on('rendezvous-open', function(event, rdv) {
						console.log('rdv-open');
					})
					.on('rendezvous-close', function(event, rdv) {
						console.log('rdv-close');
					})
					.on('rendezvous-change', function(event, rdv) {
						console.log('rdv-change');
					})
					.RendezVous();
			

Css

				/* void */
			

Always open

Render

HTML

				<div id="rendez-vous"></div>
			

JavaScript

				$('#rendez-vous').RendezVous({
						canClose: false,
						openByDefault: true
					}
				);
			

Css

				#rendez-vous .rendezvous-popup {
					position: inherit;
				}