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 (Chinese)

Render

HTML

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

JavaScript

                $('#rendez-vous-french').RendezVous({
                    i18n: {
                        calendar: {
                            month: {
                                previous: '上一月',
                                next:     '下一月',
                                up:       '选择月份'
                            },
                            year: {
                                previous: '上一年',
                                next:     '下一年',
                                up:       '选择年份'
                            },
                            decade: {
                                previous: '上十年',
                                next:     '下十年',
                                up:       '选择日期'
                            }
                        },
                        days: {
                            abbreviation: {
                                monday:    '一',
                                tuesday:   '二',
                                wednesday: '三',
                                thursday:  '四',
                                friday:    '五',
                                saturday:  '六',
                                sunday:    '日'
                            },
                            entire: {
                                monday:    '星期一',
                                tuesday:   '星期二',
                                wednesday: '星期三',
                                thursday:  '星期四',
                                friday:    '星期五',
                                saturday:  '星期六',
                                sunday:    '星期日'
                            }
                        },
                        months: {
                            abbreviation:
                            {
                                january:   '一月',
                                february:  '二月',
                                march:     '三月',
                                april:     '四月',
                                may:       '五月',
                                june:      '六月',
                                july:      '七月',
                                august:    '八月',
                                september: '九月',
                                october:   '十月',
                                november:  '十一月',
                                december:  '十二月'
                            },
                            entire: {
                                january:   '一月',
                                february:  '二月',
                                march:     '三月',
                                april:     '四月',
                                may:       '五月',
                                june:      '六月',
                                july:      '七月',
                                august:    '八月',
                                september: '九月',
                                october:   '十月',
                                november:  '十一月',
                                december:  '十二月'
                            }
                        }
                    }
                });
			

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;
				}