Examples/Demo

agjCalendar is designed to be easily integrated into existing projects quickly and without compatability 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.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
$('#example1-basic').agjCalendar();

// An alternative way of doing the same thing
$.agjCalendar({
  dateSelector: '#example1-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.

// An integration using dropdowns and an expander icon
$.agjCalendar({
  inputType:        'dropdown',
  monthSelector:    '#example2-month',
  daySelector:      '#example2-day',
  expanderSelector: '#example2-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 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 or blank along with the allowBlankDates option set to true.

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

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

// An integration using a string as well as a Date object
$.agjCalendar({
  dateSelector:    '#example3-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'
});

// An integration to choose a date in May 2000 with Tuesdays excluded
$.agjCalendar({
  dateSelector:    '#example3-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 dateFormat option to choose between four date formats. You can set the startWeekOnMonday option to true to show weeks starting with Monday on the calendar. You can use the calendarDisplay option to choose between inline, modal and full displays butwe recommend only using modal and full on touch devices along with an expander element.

en
fr

single
double
triple

sunday
monday

format 1
format 2
format 3
format 4
format 5

short
medium

inline
modal
full
dynamic

// Integrations with various languages
$.agjCalendar({
  dateSelector: '#example4-english',
  dateFormat:   2,
  language:     'en' // English
});
$.agjCalendar({
  dateSelector: '#example4-french',
  dateFormat:   2,
  language:     'fr' // Français (French)
});

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

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

// Integrations with the five date formats
$.agjCalendar({
  dateSelector: '#example4-date-format-1',
  dateFormat:   1
});
$.agjCalendar({
  dateSelector: '#example4-date-format-2',
  dateFormat:   2
});
$.agjCalendar({
  dateSelector: '#example4-date-format-3',
  dateFormat:   3
});
$.agjCalendar({
  dateSelector: '#example4-date-format-4',
  dateFormat:   4
});
$.agjCalendar({
  dateSelector: '#example4-date-format-5',
  dateFormat:   5
});

// Integrations with short and medium day names
$.agjCalendar({
  dateSelector:  '#example4-short-day-names',
  dayNameFormat: 'short'
});
$.agjCalendar({
  dateSelector:  '#example4-medium-day-names',
  dayNameFormat: 'medium'
});

// Integrations with the three calendar displays
$.agjCalendar({
  dateSelector:    '#example4-inline',
  calendarDisplay: 'inline'
});
$.agjCalendar({
  dateSelector:    '#example4-modal',
  calendarDisplay: 'modal'
});
$.agjCalendar({
  dateSelector:    '#example4-full',
  calendarDisplay: 'full'
});
$.agjCalendar({
  dateSelector:    '#example4-dynamic',
  // Set calendarDisplay as 'full' on mobile phones and tablets but 'inline' on all other devices
  calendarDisplay: /android|blackberry|fennec|ie|ipad|iphone|ipod|mobile/.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:    '#example5-basic-start',
  allowRange:      true,
  endDateSelector: '#example5-basic-end'
});

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

// An integration with a date range using dropdowns
$.agjCalendar({
  inputType:           'dropdown',
  monthSelector:       '#example5-month-start',
  daySelector:         '#example5-day-start',
  expanderSelector:    '#example5-icon-start',
  allowRange:          true,
  endMonthSelector:    '#example5-month-end',
  endDaySelector:      '#example5-day-end',
  endExpanderSelector: '#example5-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.

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

$('#example6-month-start').val('2000-02');
$('#example6-day-start').val('01');
$('#example6-month-end').val('2000-02');
$('#example6-day-end').val('03');

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

$.agjCalendar({
  inputType:           'dropdown',
  monthSelector:       '#example6-month-start',
  daySelector:         '#example6-day-start',
  expanderSelector:    '#example6-dropdown-icon-start',
  endMonthSelector:    '#example6-month-end',
  endDaySelector:      '#example6-day-end',
  endExpanderSelector: '#example6-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($('#example6-start').val()); // '02/01/2000'
  console.log($('#example6-end').val()); // '02/03/2000'

  console.log($('#example6-month-start').val()); // '2000-02'
  console.log($('#example6-day-start').val()); // '01'
  console.log($('#example6-month-end').val()); // '2000-02'
  console.log($('#example6-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 is more details on the themes page including a custom theme generator.

red
orange
yellow
green
cyan
blue
purple
pink
custom-xxx

// Integrations using different themes (included and custom)
$.agjCalendar({
  dateSelector: '#example7-default',
  theme:        null
});

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

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

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

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

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

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

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

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

$.agjCalendar({
  dateSelector: '#example7-custom',
  theme:        'custom-xxx' // Custom themes must begin with 'custom-'
});

HTML Source & Javascript Source