Dynamic Horizontal Calendar With Events - jQuery RESCalendar

Dynamic Horizontal Calendar With Events - jQuery RESCalendar

RESCalendar is a jQuery plugin to create a responsive, dynamic, scrolling, multi-language calendar interface that arranges the date slots on a horizontal line.

You can customize the event for each date in the JSON or an array of JS objects. Requires jQuery and moment.js libraries.

1. Import jQuery, moment.js and the RESCalendar plugin's files into the html file.

<link rel="stylesheet" href="/path/to/rescalendar.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/moment-with-locales.js"></script>
<script src="/path/to/rescalendar.js"></script>

2. Create a container element in which you want to generate the calendar.

<div class="rescalendar" id="example"></div>

3. Define event data in the JavaScript as follows:

const eventData = [
      {
        id: 1,
        name: 'item1',
        startDate: '2019-03-01',
        endDate: '2019-03-03',
        customClass: 'yourClass'
      },
      {
        id: 2,
        name: 'item2',
        startDate: '2019-03-05',
        endDate: '2019-03-15',
        customClass: 'yourClass',
        title: 'Title 2'
      },
      {
        id: 3,
        name: 'item5',
        startDate: '2019-03-05',
        endDate: '2019-03-08',
        customClass: 'yourClass'
      }
]

4. Call the function on the container element and specify the date format. That's it.

$('#example').rescalendar({
  id: 'example',
  format: 'MM-DD-YYYY',
  data: eventData
  dataKeyField: 'name',
  dataKeyValues: ['item1', 'item2', 'item3']
});

5. Specify the language for the calendar. Default: en.

$('#example').rescalendar({
  locale: 'es'
});

6. More configuration options with default values.

$('#example').rescalendar({
  // initial date
  refDate: moment().format( 'YYYY-MM-DD' ),
  // the number of days to move on click
  jumpSize: 15,
  // calendar size
  calSize: 30,
  // disabled days
  disabledDays : [],
  // 0 = Sunday
  disabledWeekDays: [],
  // language strings
  lang: {
    'init_error' : 'Error when initializing',
    'no_data_error': 'No data found',
    'no_ref_date'  : 'No refDate found',
    'today'   : 'Today'
  }
  
});

This awesome jQuery plugin is developed by cchas. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.03.2019
  • Source