jQuery Schedule v2.2.0 Demo

Basic

$('#schedule').jqs();

Read mode

$('#schedule2').jqs({
  mode: 'read',
  data: [
    {
      day: 0,
      periods: [
        ['20:00', '00:00'],
        ['20:00', '22:00'], // Invalid period, not displayed
        ['00:00', '02:00']
      ]
    }, {
      day: 3,
      periods: [
        ['00:00', '08:30'],
        ['09:00', '12:00']
      ]
    }
  ]
});

Events & Methods

$('#schedule3').jqs({
  onInit: function () {
    $('#logs').val('onInit fire !\n' + $('#logs').val());
  },
  onAddPeriod: function () {
    $('#logs').val('onAddPeriod fire !\n' + $('#logs').val());
  },
  onRemovePeriod: function () {
    $('#logs').val('onRemovePeriod fire !\n' + $('#logs').val());
  },
  onDuplicatePeriod: function () {
    $('#logs').val('onDuplicatePeriod fire !\n' + $('#logs').val());
  },
  onClickPeriod: function () {
    $('#logs').val('onClickPeriod fire !\n' + $('#logs').val());
  }
});

$('#schedule3').jqs('export');

$('#schedule3').jqs('import', [
  {
    day: 1,
    periods: [
      ['8:00', '10:00'] // Compact
    ]
  }, {
    day: 2,
    periods: [
      ['20:00', '00:00'],
      ['20:00', '22:00'] // Invalid period, not displayed
    ]
  }, {
    day: 4,
    periods: [
      { // Full
        start: '10:00',
        end: '12:00',
        title: 'A black period',
        backgroundColor: '#000',
        borderColor: '#000',
        textColor: '#fff'
      }
    ]
  }
]);

$('#schedule3').jqs('reset');

Result :

Logs :

Custom periods and days

$('#schedule4').jqs({
  days: 5,
  periodColors: [
    ['rgba(0, 0, 0, 0.5)', '#000', '#fff'],
    ['rgba(200, 0, 0, 0.5)', '#f00', '#000'],
    ['rgba(0, 200, 0, 0.5)', '#0f0', '#000'],
    ['rgba(0, 0, 200, 0.5)', '#00f', '#000']
  ],
  periodTitle: 'No title',
  periodBackgroundColor: 'rgba(0, 0, 0, 0.5)',
  periodBorderColor: '#000',
  periodTextColor: '#fff',
  periodRemoveButton: 'Remove please !',
  periodTitlePlaceholder: 'A custom title'
});

Translation & 12-hour clock

$('#schedule5').jqs({
  mode: 'edit',
  daysList: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
  hour: 12,
  periodDuration: 15,
  periodOptions: false,
  data: [
    {
      day: 0,
      periods: [
        ['2', '6'], // Compact 12 hour
        ['10pm', '12am'],
        ['12am', '2:30am'] // Invalid period, not displayed
      ]
    }, {
      day: 1,
      periods: [
        ['1:45am', '5:15am']
      ]
    }, {
      day: 2,
      periods: [
        ['2', '2p'] // Compact 12 hour
      ]
    }
  ]
});