Examples/Demo

agjCalendar is designed to be easily integrated into existing projects quickly and without compatibility issues or any other conflicts. Because it’s a jQuery plugin you will first need to include an HTML reference to the jQuery Javascript library if you don’t already have one. From there, simply add HTML references to jquery.agjCalendar.js and jquery.agjCalendar.css to start using the agjCalendar plugin.

<!-- Reference to the jQuery Javascript library -->
<script type="text/javascript" src="//code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Reference to the agjCalendar jQuery plugin -->
<script type="text/javascript" src="//agjCalendar.agjjQuery.org/source/agjCalendar/jquery.agjCalendar.min.js"></script>

<!-- Reference to the agjCalendar CSS stylesheet -->
<style type="text/css">@import "//agjCalendar.agjjQuery.org/source/agjCalendar/jquery.agjCalendar.min.css";</style>

All of the examples below have interactive demos for you to try out.

Example One: Basic Integration

To initialize a basic integration simply select a jQuery element and call its agjCalendar() function. Alternatively you can call the $.agjCalendar() function directly and pass your element selector using the dateSelector option.

// The most basic agjCalendar integration
$('#example-01-1-basic').agjCalendar();

HTML Source & Javascript Source

// An alternative way of doing the same thing
$.agjCalendar({
  dateSelector: '#example-01-2-alternative'
});

HTML Source & Javascript Source

Example Two: Dropdowns and Expander

Instead of a single text input, you can set the inputType option to dropdown to allow users to select dates using two dropdowns set by the monthSelector and daySelector options. You can also integrate an optional expander element to allow the calendar to show up on click using the expanderElement option. The expanderElement can be used with both text and dropdown integrations.

Calendar Icon 

// An integration using dropdowns and an expander icon
$.agjCalendar({
  inputType:        'dropdown',
  monthSelector:    '#example-02-1-month',
  daySelector:      '#example-02-1-day',
  expanderSelector: '#example-02-1-icon'
});

HTML Source & Javascript Source

Example Three: Minimum, Maximum, Default and Excluded Dates

You can specify a minimum and/or maximum date by using the minimumDate and/or maximumDate options. Simply pass a string in the format YYYY-MM-DD or a date object to control which dates can be selected via the calendar. Further, you can choose either a default date to be prefilled using the defaultDate option with a YYYY-MM-DD formatted string, a date object or blank along with the allowBlankDates option set to true. We also allow you to pass an array of dates that users will not be able to select using the excludeDates option.

// An integration to choose a date in 2000 with a blank date prefilled
$.agjCalendar({
  dateSelector:    '#example-03-1-blank',
  minimumDate:     '2000-01-01',
  maximumDate:     '2000-12-31',
  allowBlankDates: true,
  defaultDate:     'blank'
});

HTML Source & Javascript Source

// An integration using a string as well as a Date object
$.agjCalendar({
  dateSelector:    '#example-03-2-object',
  minimumDate:     new Date(2000, 0, 1), // you can pass a Date Object
  maximumDate:     '2000-12-31', // or you can pass a string
  allowBlankDates: true,
  defaultDate:     'blank'
});

HTML Source & Javascript Source

// An integration to choose a date in 2000 with Cinco de Mayo prefilled
$.agjCalendar({
  dateSelector: '#example-03-3-prefill',
  minimumDate:  '2000-01-01',
  maximumDate:  '2000-12-31',
  defaultDate:  '2000-05-05'
});

HTML Source & Javascript Source

// An integration to choose a date in May 2000 with Tuesdays excluded
$.agjCalendar({
  dateSelector:    '#example-03-4-exclusions',
  minimumDate:     '2000-05-01',
  maximumDate:     '2000-05-31',
  allowBlankDates: true,
  defaultDate:     'blank',
  excludeDates:    [ // you can use Date objects or strings in this array
    '2000-05-02',
    new Date(2000, 4, 9),
    '2000-05-16',
    new Date(2000, 4, 23),
    '2000-05-30'
  ]
});

HTML Source & Javascript Source

Example Four: Formatting and Display Options

There are other formatting and display choices for your integration. You can use the calendarCount option to choose between a single, double or triple calendar. You can use the calendarSize option to choose between a small, medium or large display. You can use the dateFormat option to choose any date format. You can set the startWeekOnMonday option to true to show weeks starting with Monday on the calendar. You can use the dayNameFormat option to choose between short, abbreviated or full day of week names. You can use the calendarDisplay option to choose between inline, modal and full displays but we recommend only using modal and full on touch devices along with an expander element.



// Integrations with a single, double and triple calendars
$.agjCalendar({
  dateSelector:  '#example-04-1-single',
  calendarCount: 1
});

$.agjCalendar({
  dateSelector:  '#example-04-1-double',
  calendarCount: 2
});

$.agjCalendar({
  dateSelector:  '#example-04-1-triple',
  calendarCount: 3
});

HTML Source & Javascript Source



// Integrations displayed at small, medium and large sizes
$.agjCalendar({
  dateSelector: '#example-04-2-small',
  calendarSize: 'small'
});

$.agjCalendar({
  dateSelector: '#example-04-2-medium',
  calendarSize: 'medium'
});

$.agjCalendar({
  dateSelector: '#example-04-2-large',
  calendarSize: 'large'
});

HTML Source & Javascript Source


// Integrations with weeks starting on Sunday and Monday
$.agjCalendar({
  dateSelector:      '#example-04-3-start-on-sunday',
  startWeekOnMonday: false
});

$.agjCalendar({
  dateSelector:      '#example-04-3-start-on-monday',
  startWeekOnMonday: true
});

HTML Source & Javascript Source






// Integrations with the five date formats
$.agjCalendar({
  dateSelector: '#example-04-4-date-format-1',
  dateFormat:   'm/d/Y'
});

$.agjCalendar({
  dateSelector: '#example-04-4-date-format-2',
  dateFormat:   'M j, Y'
});

$.agjCalendar({
  dateSelector: '#example-04-4-date-format-3',
  dateFormat:   'd/m/Y'
});

$.agjCalendar({
  dateSelector: '#example-04-4-date-format-4',
  dateFormat:   'Y-m-d'
});

$.agjCalendar({
  dateSelector: '#example-04-4-date-format-5',
  dateFormat:   'j F Y'
});

$.agjCalendar({
  dateSelector: '#example-04-4-date-format-custom',
  dateFormat:   'D~M~j~y'
});

HTML Source & Javascript Source



// Integrations with short, abbreviated and full day names
$.agjCalendar({
  dateSelector:  '#example-04-5-short-day-names',
  dayNameFormat: 'short'
});

$.agjCalendar({
  dateSelector:  '#example-04-5-abbreviated-day-names',
  dayNameFormat: 'abbreviated'
});

$.agjCalendar({
  dateSelector:  '#example-04-5-full-day-names',
  dayNameFormat: 'full'
});

HTML Source & Javascript Source




// Integrations with the three calendar displays
$.agjCalendar({
  dateSelector:    '#example-04-6-inline',
  calendarDisplay: 'inline'
});

$.agjCalendar({
  dateSelector:    '#example-04-6-modal',
  calendarDisplay: 'modal'
});

$.agjCalendar({
  dateSelector:    '#example-04-6-full',
  calendarDisplay: 'full'
});

// Integration with a dynamic calendar display based on type of device
var mobilePhoneOrTabletRegex = new RegExp(
  /android|blackberry|fennec|ie|ipad|iphone|ipod|mobile/
);

$.agjCalendar({
  dateSelector: '#example-04-6-dynamic',
  // Set calendarDisplay as 'full' on mobile phones and tablets but 'inline' on
  // all other devices
  calendarDisplay:
    mobilePhoneOrTabletRegex.test(navigator.userAgent.toLowerCase()) ?
    'full' :
    'inline'
});

HTML Source & Javascript Source

Example Five: Date Ranges

Instead of being limited to a single date, you can set the allowRange option to true to enable date ranges and allow a user to select two dates. You can further control the date range by using the minimumRange, maximumRange, defaultRange and autoSetEndDate options which are all optional. Text and dropdown integrations both support ranges.


// An integration with a basic date range
$.agjCalendar({
  dateSelector:    '#example-05-1-basic-start',
  allowRange:      true,
  endDateSelector: '#example-05-1-basic-end'
});

HTML Source & Javascript Source


// An integration with an advanced date range
$.agjCalendar({
  dateSelector:    '#example-05-2-advanced-start',
  allowRange:      true,
  endDateSelector: '#example-05-2-advanced-end',
  minimumRange:    1,
  maximumRange:    7,
  defaultRange:    2,
  autoSetEndDate:  'always',
  minimumDate:     '2023-01-01',
  maximumDate:     '2023-12-31',
  allowBlankDates: true,
  defaultDate:     'blank'
});

HTML Source & Javascript Source

Calendar Icon
Calendar Icon 

// An integration with a date range using dropdowns
$.agjCalendar({
  inputType:           'dropdown',
  monthSelector:       '#example-05-3-month-start',
  daySelector:         '#example-05-3-day-start',
  expanderSelector:    '#example-05-3-icon-start',
  allowRange:          true,
  endMonthSelector:    '#example-05-3-month-end',
  endDaySelector:      '#example-05-3-day-end',
  endExpanderSelector: '#example-05-3-icon-end'
});

HTML Source & Javascript Source

Example Six: Existing/Original Values

If there is an existing value on the text or dropdown elements, it will be preserved once the integration is initialized. With a text input such as <input value="02/01/2000" … /> the date will be preserved regardless of if it is valid or not. With a dropdown such as <select … ><option value="2000-02" selected="selected">February 2000</option>… the date will be preserved if an option exists with a matching value (2000-02 in the case of the example) after the integration has been initialized.

Calendar Icon
Calendar Icon 

// Set values prior to initializing the integrations
$('#example-06-1-start').val('02/01/2000');
$('#example-06-1-end').val('02/03/2000');

// Text and dropdown integrations to choose a date in 2000
$.agjCalendar({
  dateSelector:        '#example-06-1-start',
  expanderSelector:    '#example-06-1-text-icon-start',
  endDateSelector:     '#example-06-1-end',
  endExpanderSelector: '#example-06-1-text-icon-end',
  allowRange:          true,
  defaultRange:        3,
  minimumRange:        0,
  maximumRange:        7,
  minimumDate:         '2000-01-01',
  maximumDate:         '2000-12-31',
  allowBlankDates:     true,
  defaultDate:         'blank'
});

// Confirm the values once the integrations have been initialized
if (console && console.log) {
  console.log($('#example-06-1-start').val()); // '02/01/2000'
  console.log($('#example-06-1-end').val()); // '02/03/2000'
}

HTML Source & Javascript Source

Calendar Icon
Calendar Icon 

// Set values prior to initializing the integrations
$('#example-06-2-month-start').val('2000-02');
$('#example-06-2-day-start').val('01');
$('#example-06-2-month-end').val('2000-02');
$('#example-06-2-day-end').val('03');

// Text and dropdown integrations to choose a date in 2000
$.agjCalendar({
  inputType:           'dropdown',
  monthSelector:       '#example-06-2-month-start',
  daySelector:         '#example-06-2-day-start',
  expanderSelector:    '#example-06-2-dropdown-icon-start',
  endMonthSelector:    '#example-06-2-month-end',
  endDaySelector:      '#example-06-2-day-end',
  endExpanderSelector: '#example-06-2-dropdown-icon-end',
  allowRange:          true,
  defaultRange:        3,
  minimumRange:        0,
  maximumRange:        7,
  minimumDate:         '2000-01-01',
  maximumDate:         '2000-12-31',
  allowBlankDates:     true,
  defaultDate:         'blank'
});

// Confirm the values once the integrations have been initialized
if (console && console.log) {
  console.log($('#example-06-2-month-start').val()); // '2000-02'
  console.log($('#example-06-2-day-start').val()); // '01'
  console.log($('#example-06-2-month-end').val()); // '2000-02'
  console.log($('#example-06-2-day-end').val()); // '03'
}

HTML Source & Javascript Source

Example Seven: Included and Custom Themes

If you want to style your agjCalendar to matching your branding you can tap into on of our eight included themes. They are red, orange, yellow, green, cyan, blue, purple & pink. You can also use your own theme name which must begin with custom-. You will need to add custom stylings to your CSS stylesheet to integration a custom theme, the custom-xxx styles are included on the documentation website but not the plugin. There are more details on the themes page including a custom theme generator.









// Integrations using the included themes
$.agjCalendar({
  dateSelector: '#example-07-1-default',
  theme:        null
});

$.agjCalendar({
  dateSelector: '#example-07-1-red',
  theme:        'red'
});

$.agjCalendar({
  dateSelector: '#example-07-1-orange',
  theme:        'orange'
});

$.agjCalendar({
  dateSelector: '#example-07-1-yellow',
  theme:        'yellow'
});

$.agjCalendar({
  dateSelector: '#example-07-1-green',
  theme:        'green'
});

$.agjCalendar({
  dateSelector: '#example-07-1-cyan',
  theme:        'cyan'
});

$.agjCalendar({
  dateSelector: '#example-07-1-blue',
  theme:        'blue'
});

$.agjCalendar({
  dateSelector: '#example-07-1-purple',
  theme:        'purple'
});

$.agjCalendar({
  dateSelector: '#example-07-1-pink',
  theme:        'pink'
});

HTML Source & Javascript Source

// Integration using a custom theme
$.agjCalendar({
  dateSelector: '#example-07-2-custom',
  theme:        'custom-xxx' // Custom themes must begin with 'custom-'
});

HTML Source & Javascript Source

Example Eight: Disabling and Reinitializing Integrations

If you want to disable or change an integration you can use the $.agjCalendar.disable() function. If you want to disable the integration you can call the function. If you want to change an integration you can disable the integration by calling the function and then initialize a new integration.

// Initialize our first date field with a red theme
$.agjCalendar({
  dateSelector: '#example-08-1-first',
  theme:        'red'
});

// Attempt to reinitialize our first date field with a green theme which will
// fail because the original red theme integration is still enabled
$.agjCalendar({
  dateSelector: '#example-08-1-first',
  theme:        'green'
});

HTML Source & Javascript Source

// Initialize our second date field with a red theme and remember the
// integration for later
var secondIntegration = $.agjCalendar({
  dateSelector: '#example-08-2-second',
  theme:        'red'
});

// Disable our red theme integration on the second date field to allow us to
// reinitialize the date field with a green theme
$.agjCalendar.disable(secondIntegration);

// Attempt to reinitialize our second date field with a green theme which will
// succeed because the original red theme integration has been disabled
$.agjCalendar({
  dateSelector: '#example-08-2-second',
  theme:        'green'
});

HTML Source & Javascript Source

// Initialize our third date field with a red theme using the
// $.fn.agjCalendar() method and remember the integration for later by using a
// callback function
var thirdIntegration;

$('#example-08-3-third').agjCalendar({
  theme: 'red'
}, function(returnValue) {
  thirdIntegration = returnValue;
});

// Disable our red theme integration on the third date field to allow us to
// reinitialize the date field with a green theme
$.agjCalendar.disable(thirdIntegration);

// Attempt to reinitialize our third date field with a green theme which will
// succeed because the original red theme integration has been disabled
$.agjCalendar({
  dateSelector: '#example-08-3-third',
  theme:        'green'
});

HTML Source & Javascript Source

Example Nine: Languages and Custom Translations

The plugin has support for twenty languages as well as custom translations. To use one of the included languages pass 'en', 'ar', 'bn', 'de', 'es', 'fr', 'he', 'hi', 'it', 'ja', 'ko', 'mr', 'pa', 'pt', 'ru', 'te', 'tr', 'ur', 'vi' or 'zh' as the language option. To use custom translations pass an object of translations as the translations option. There are more details on the translations page.




















// Integrations with various languages
$.agjCalendar({
  dateSelector:    '#example-09-1-english',
  dateFormat:      'F j, Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'en' // English (default)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-arabic',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'ar' // اَلْعَرَبِيَّةُ (Arabic)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-bengali',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'bn' // বাংলা (Bengali)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-german',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'de' // Deutsch (German)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-spanish',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'es' // Español (Spanish)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-french',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'fr' // Français (French)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-hebrew',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'he' // עִבְרִית (Hebrew)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-hindi',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'hi' // आधुनिक मानक हिन्दी (Hindi)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-italian',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'it' // Italiano (Italian)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-japanese',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'ja' // 日本語 (Japanese)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-korean',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'ko' // 한국어 (Korean)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-marathi',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'mr' // मराठी (Marathi)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-punjabi',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'pa' // پنجابی (Punjabi)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-portuguese',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'pt' // Português (Portuguese)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-russian',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'ru' // русский язык (Russian)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-telugu',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'te' // తెలుగు (Telugu)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-turkish',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'tr' // Türkçe (Turkish)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-urdu',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'ur' // اردو (Urdu)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-vietnamese',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'vi' // Tiếng Việt (Vietnamese)
});

$.agjCalendar({
  dateSelector:    '#example-09-1-chinese',
  dateFormat:      'j F Y',
  calendarSize:    'large',
  dayNameFormat:   'abbreviated',
  dayNameEllipsis: false,
  language:        'zh' // 官话 (Chinese Mandarin)
});

HTML Source & Javascript Source

// Add any unique unicode characters prior to using them in custom translations
$.agjCalendar.addRegexTextPattern('\\u2014'); // em dash (—)

// You can quickly enable all emoji support in most modern browsers
$.agjCalendar.enableEmojiSupport();

// Or you can enable one emoji at a time with
// $.agjCalendar.addRegexTextPattern() if you want to support older versions of
// Microsoft Internet Explorer (using both methods will not conflict with each
// other)
$.agjCalendar.addRegexTextPattern('☀️🌙🔴🟤🟠🟡🪐'); // days of week
$.agjCalendar.addRegexTextPattern('🎉💘🍀🐇🤱🏳️‍🌈🍁😇✊🎃🎖️🎄'); // months
$.agjCalendar.addRegexTextPattern('❌⏭️⏮️👀📅'); // other translations

// Integration with custom translations using emoji
$.agjCalendar({
  dateSelector:               '#example-09-2-emoji',
  allowBlankDates:            true,
  defaultDate:                'blank',
  dateFormat:                 'Y M jS',
  dateFormatDayOfWeekTooltip: 'l D',
  dateFormatDateTooltip:      'D j F Y M',
  dateFormatMonthLabel:       'F M Y',
  dayNameFormat:              'abbreviated',
  calendarCount:              3,
  calendarSize:               'medium',
  translations:               {
    days: {
      full: {
        0: 'Sunday — the sun',
        1: 'Monday — the moon',
        2: 'Tuesday — Mars',
        3: 'Wednesday — Mercury',
        4: 'Thursday — Jupiter',
        5: 'Friday — Venus',
        6: 'Saturday — Saturn'
      },
      abbreviated: {
        0: '☀️',
        1: '🌙',
        2: '🔴',
        3: '🟤',
        4: '🟠',
        5: '🟡',
        6: '🪐'
      }
    },
    months: {
      abbreviated: {
        0:  '🎉', // 🎉 for New Year’s Day
        1:  '💘', // 💘 for Valentine’s Day
        2:  '🍀', // 🍀 for St. Patrick’s Day
        3:  '🐇', // 🐇 for Easter
        4:  '🤱', // 🤱 for Mother’s Day
        5:  '🏳️‍🌈', // 🏳️‍🌈 for Pride Month
        6:  '🍁', // 🍁 for Canada Day
        7:  '😇', // 😇 for the Assumption of Mary
        8:  '✊', // ✊ for Labour Day and Labor Day
        9:  '🎃', // 🎃 for Halloween
        10: '🎖️', // 🎖️ for Remembrance Day, Veterans Day, Armistace Day, etc.
        11: '🎄' // 🎄 for Christmas
      }
    },
    hideCalendar:    '❌',
    nextMonth:       '⏭️',
    previousMonth:   '⏮️',
    poweredByBefore: '👀',
    blankDateText:   '📅'
  }
});

HTML Source & Javascript Source