arrobefr-jquery-calendar

A responsive jquery calendar scheduler built with bootstrap and moment.js

Showing:

Popularity

Downloads/wk

14

GitHub Stars

73

Maintenance

Last Commit

2yrs ago

Contributors

3

Package

Dependencies

4

Size (min+gzip)

7.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jquery-calendar

A responsive jquery calendar scheduler built with bootstrap and moment.js

Switch to bootstrap 4

It was released with bootstrap 4 ! Here it is

Screenshots

Screenshots are made using the example/example.html. There is events on one week only, so some parts of calendar are empty.

Desktop user

screenshots/Desktop user.gif

Mobile user

screenshots/Mobile user.gif

Demo

Here is a full demo

Installation

Using NPM

npm install arrobefr-jquery-calendar

Using a CDN

use of the latest version on cdn.jsdelivr.net

<script src="https://cdn.jsdelivr.net/npm/arrobefr-jquery-calendar@1.0.11/dist/js/jquery-calendar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/arrobefr-jquery-calendar@1.0.11/dist/css/jquery-calendar.min.css">

Usage

Simple example

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="node_modules/moment/min/moment-with-locales.min.js"></script>
  <script src="node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
  <script src="node_modules/arrobefr-jquery-calendar/dist/js/jquery-calendar.min.js"></script>
  <link rel="stylesheet" href="node_modules/arrobefr-jquery-calendar/dist/css/jquery-calendar.min.css">
  <title>Calendar</title>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <div id="calendar"></div>
      </div>
    </div>
  </div>
  <script>
    $(document).ready(function(){
      moment.locale('fr');
      var now = moment();
      $('#calendar').Calendar({
        events: [
          { // An event on the current week on Wednesday from 10h to 12h
            start: now.startOf('week').isoWeekday(3).startOf('day').add(10, 'h'),
            end: now.startOf('week').isoWeekday(3).startOf('day').add(12, 'h'),
            title: 'An event title !',
            content: 'Hello World! <br>Foo Bar<p class="text-right">Wow this text is right aligned !</p>',
            category: 'A test category name'
          }
        ]
      }).init();
    });
  </script>
</body>
</html>

Full documentation

HTML

Add a div somewhere that is unique, with an id for example

<div id="calendar"></div>

JavaScript

Configuration

ArgumentTypeDefault valueLink / Description
localestring'fr'See Moment.js docs
enableKeyboardbooleantrueEnables or disables the keyboard shortcuts
defaultView.largeScreenstring'week'Defines the default view to load for large screen, value must be 'day', 'week', 'month'
defaultView.smallScreenstring'day'Defines the default view to load for small screen, value must be 'day', 'week', 'month'
defaultView.smallScreenThresholdinteger1000Defines the threshold to consider a screen small. The value is in pixels
weekday.timeline.fromHourinteger7Start hour of timeline
weekday.timeline.toHourinteger20End hour of timeline
weekday.timeline.intervalMinutesinteger60The time interval of timeline ; each 5, 15, 30, 60, 120, ... minutes
weekday.timeline.formatstring'HH:mm'The time format in timeline and modal ; see Moment.js docs
weekday.timeline.heightPxinteger50The height in pixels of timeline, it must not be under the bootstrap font-size
weekday.timeline.autoResizebooleantrueIf true, it resizes the timeline if events are out of interval [fromHour;toHour]. It will only extend time interval, it will not reduce !
weekday.dayline.weekdaysarray[1, 2, 3, 4, 5]The days to display ; 0 is first day of week depending of the locale ; see Moment.js docs
weekday.dayline.formatstring'dddd DD/MM'The time format of days ; see Moment.js docs
weekday.dayline.heightPxinteger30The height in pixels of dayline, it must not be under the bootstrap font-size
weekday.dayline.month.formatstring'MMMM YYYY'The time format of month header ; see Moment.js docs
weekday.dayline.month.heightPxinteger30The height in pixels of month header
weekday.dayline.month.weekFormatstring'w'The format of week number ; see Moment.js docs
unixTimestampintegermoment().format('X')Any timestamp in the week to display, defaults to current week
event.hover.delayinteger500Time to wait hover before display full event
colors.eventsarray[some colors from materialui]A set of colors used as background of events in hexadecimal format; example : ['#283593'] ; (Source colors using 800)[https://www.materialui.co/colors]
colors.daynotesarray[some colors from materialui]A set of colors used as background of day notes in hexadecimal format; example : ['#283593'] ; (Source colors using 200)[https://www.materialui.co/colors]
colors.randombooleantrueRandomize the color order
categories.enablebooleantrueEnable or disable the categories header
categories.hover.delayinteger500Milliseconds to wait before animation
now.enablebooleanfalseEnable or disable a <hr> that represents the current time (now)
now.refreshbooleanfalseEnable or disable the refresh of this <hr>, it follows the time
now.heightPxinteger1The <hr>'s weight
now.stylestring'solid'The <hr>'s style, see CSS border style docs
now.colorstring'#03A9F4'The <hr>'s color
eventsarray[]An array of events object, see the docs of Events array below
daynotesarray[]An array of object, see the docs of DayNotes array below

Events array

Attributes

The array of events contains objects that have these attributes :

AttributeTypeDescription
startintegerThe start timestamp of event
endintegerThe end timestamp of event
titlestringAny text
contentstringHTML content
categorystringOptionnal if you want different colors grouped by a category or something else

DayNotes array

Attributes

The array of events contains objects that have these attributes :

AttributeTypeDescription
timeintegerAny timestamp in the day
titlestringAny text
contentstringHTML content
categorystringOptionnal if you want different colors grouped by a category or something else

Functions

Example
var calendar = $('#calendar').Calendar({...});
var result = calendar.function(); // It is just an example, replace "function" by one of the list below
Functions list
FunctionArgumentsReturnNote
initCalendar instanceIt must be called after any modification to re-draw the calendar
getEventsArray of events objectsReturns events loaded in this instance of Calendar
setEventsArray of events objectsCalendar instanceIt replaces events !
addEventsArray of events objectsCalendar instanceIt just adds events (it not replaces events)
getDaynotesArray of day notes objectsReturns day notes loaded in this instance of Calendar
setDaynotesArray of day notes objectsCalendar instanceIt replaces day notes !
addDaynotesArray of day notes objectsCalendar instanceIt just adds day notes (it not replaces day notes)
getInitTimeString : millisecondsIt returns the time with string "ms"
getViewIntervalArray of 2 integers (unix timestamps)It returns the from and to timestamp of current view
getNextViewIntervalArray of 2 integers (unix timestamps)It returns the from and to timestamp of the next view (if user click or swipe to right)
getPrevViewIntervalArray of 2 integers (unix timestamps)It returns the from and to timestamp of the previous view (if user click or swipe to left)
getTimestampInteger : the current unix timestamp viewed
setTimestampInteger : a unix timestampCalendar instanceIt not affects the view, you have to call init to display the update
getViewString : the current viewIt returns 'day', 'week' or 'month'
setViewString : 'day' or 'week' or 'month'Calendar instanceIt not affects the view, you have to call init to display the update
getEventCategoryColorString : any categoryString : a hexadecimal color prepended by #It affects events only. Return example : '#C62828'
getEventCategoriesColorsArray of objectsIt affects events only. Return example : [{category:"Personnal", color: "#FF8F00"}, {category:"Professionnal", color:"#AD1457"}]
setEventCategoriesColorsArray of objectsCalendar instanceIt affects events only. See example of getEventCategoriesColors
getDaynoteCategoryColorString : any categoryString : a hexadecimal color prepended by #It affects day notes only. Return example : '#EF9A9A'
getDaynoteCategoriesColorsArray of objectsIt affects day notes only. Return example : [{category:"Public holiday", color: "#B39DDB"}]
setDaynoteCategoriesColorsArray of objectsCalendar instanceIt affects day notes only. See example of getDaynoteCategoriesColors
getEventColorsArray of stringsIt affects the events only. It returns an array of hexadecimal colors prepended by a #, example : ["#FF8F00", "#9E9D24", "#EF6C00"]
setEventColorsArray of stringsCalendar instanceIt affects the events only. See example of getEventColors
getDaynoteColorsArray of stringsIt affects the day notes only. It returns an array of hexadecimal colors prepended by a #, example : ["#FF8F00", "#9E9D24", "#EF6C00"]
setDaynoteColorsArray of stringsCalendar instanceIt affects the day notes only. See example of getEventColors

Events

Example
var calendar = $('#calendar').Calendar({...});
$('#calendar').on('event name', function(event, arg1, arg2, ...){...});
$('#calendar').unbind('event name').on('event name', function(event, arg1, arg2, ...){...});
Cancel default event action

Example : deactivate the click on event or day note

var calendar = $('#calendar').Calendar({...});
$('#calendar').unbind('Calendar.event-click');
Events list
Calendar.init
  • Calendar.init
  • When
    • View changes (day, week or month)
    • View moves (left or right)
    • Manually called by you
  • Arguments
    • event
      • The jQuery event
    • instance
      • The Calendar instance
    • before
      • An array of 2 unix timestamp of the previous view (on left)
      • Example on a week [1526248800, 1526853599]
    • current
      • An array of 2 unix timestamp of the current view
      • Example on a week [1526853600, 1527458399]
    • after
      • An array of 2 unix timestamp of the next view (on right)
      • Example on a week [1527458400, 1528063199]
  • Example :
var calendar = $('#calendar').Calendar({...});
$('#calendar').on('Calendar.init', function(event, instance, before, current, after){
  console.log(event);     // jQuery event
  console.log(instance);  // Equals to var calendar above
  console.log(before);    // Array of the past view interval [unixTimestampFrom, unixTimestampTo]
  console.log(current);   // Array of the current view interval [unixTimestampFrom, unixTimestampTo]
  console.log(after);     // Array of the next view interval [unixTimestampFrom, unixTimestampTo]
});
Calendar.daynote-mouseenter and Calendar.event-mouseenter
  • Calendar.daynote-mouseenter and Calendar.event-mouseenter
  • When
    • The mouse is hover an event or a day note for a while (see event.hover.delay under configuration)
  • Default
    • Enlarge the event or day note over the others
  • Arguments
    • event
      • The jQuery event
    • instance
      • The Calendar instance
    • elem
      • The jQuery element which triggered the event
  • Example :
var calendar = $('#calendar').Calendar({...});
$('#calendar').on('Calendar.daynote.mouseenter', function(event, instance, elem){
  console.log(event);     // jQuery event
  console.log(instance);  // Equals to var calendar above
  console.log(elem);      // Use elem to make an animation or somthing else
});
Calendar.daynote-mouseleave and Calendar.event-mouseleave
  • Calendar.daynote-mouseleave and Calendar.event-mouseleave
  • It is the same as Calendar.daynote-mouseenter and Calendar.event-mouseenter but when the mouse leave the event
  • Default, restore the event or day note state before the default of Calendar.daynote-mouseenter and Calendar.event-mouseenter
Calendar.daynote-click and Calendar.event-click
  • Calendar.daynote-click and Calendar.event-click
  • When
    • The user click or touch an event or a day note
  • Default
    • Opens a bootstrap modal to display the event
  • Arguments
    • event
      • The jQuery event
    • instance
      • The Calendar instance
    • elem
      • The jQuery element which triggered the event
    • evt
      • The event object you gived which triggered the event (so you have : start, end, title, content, category, anything else if you gived more attributes)
  • Example :
var calendar = $('#calendar').Calendar({...});
$('#calendar').on('Calendar.daynote-click', function(event, instance, elem, evt){
  console.log(event);     // jQuery event
  console.log(instance);  // Equals to var calendar above
  console.log(elem);      // Use elem to make an animation or somthing else
  console.log(evt);       // You have all informations to display it in a modal
});

Contributing

Feel free to report bugs or make a pull request ;-)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100