❤
npm
Sign UpSign In

arrobefr-jquery-calendar

1.0.12 • Public • Published

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 emtpy.

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

Argument Type Default value Link / Description
locale string 'fr' See Moment.js docs
enableKeyboard boolean true Enables or disables the keyboard shortcuts
defaultView.largeScreen string 'week' Defines the default view to load for large screen, value must be 'day', 'week', 'month'
defaultView.smallScreen string 'day' Defines the default view to load for small screen, value must be 'day', 'week', 'month'
defaultView.smallScreenThreshold integer 1000 Defines the threshold to consider a screen small. The value is in pixels
weekday.timeline.fromHour integer 7 Start hour of timeline
weekday.timeline.toHour integer 20 End hour of timeline
weekday.timeline.intervalMinutes integer 60 The time interval of timeline ; each 5, 15, 30, 60, 120, ... minutes
weekday.timeline.format string 'HH:mm' The time format in timeline and modal ; see Moment.js docs
weekday.timeline.heightPx integer 50 The height in pixels of timeline, it must not be under the bootstrap font-size
weekday.timeline.autoResize boolean true If 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.weekdays array [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.format string 'dddd DD/MM' The time format of days ; see Moment.js docs
weekday.dayline.heightPx integer 30 The height in pixels of dayline, it must not be under the bootstrap font-size
weekday.dayline.month.format string 'MMMM YYYY' The time format of month header ; see Moment.js docs
weekday.dayline.month.heightPx integer 30 The height in pixels of month header
weekday.dayline.month.weekFormat string 'w' The format of week number ; see Moment.js docs
unixTimestamp integer moment().format('X') Any timestamp in the week to display, defaults to current week
event.hover.delay integer 500 Time to wait hover before display full event
colors.events array [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.daynotes array [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.random boolean true Randomize the color order
categories.enable boolean true Enable or disable the categories header
categories.hover.delay integer 500 Milliseconds to wait before animation
now.enable boolean false Enable or disable a <hr> that represents the current time (now)
now.refresh boolean false Enable or disable the refresh of this <hr>, it follows the time
now.heightPx integer 1 The <hr>'s weight
now.style string 'solid' The <hr>'s style, see CSS border style docs
now.color string '#03A9F4' The <hr>'s color
events array [] An array of events object, see the docs of Events array below
daynotes array [] An array of object, see the docs of DayNotes array below

Events array

Attributes

The array of events contains objects that have these attributes :

Attribute Type Description
start integer The start timestamp of event
end integer The end timestamp of event
title string Any text
content string HTML content
category string Optionnal 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 :

Attribute Type Description
time integer Any timestamp in the day
title string Any text
content string HTML content
category string Optionnal 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
Function Arguments Return Note
init Calendar instance It must be called after any modification to re-draw the calendar
getEvents Array of events objects Returns events loaded in this instance of Calendar
setEvents Array of events objects Calendar instance It replaces events !
addEvents Array of events objects Calendar instance It just adds events (it not replaces events)
getDaynotes Array of day notes objects Returns day notes loaded in this instance of Calendar
setDaynotes Array of day notes objects Calendar instance It replaces day notes !
addDaynotes Array of day notes objects Calendar instance It just adds day notes (it not replaces day notes)
getInitTime String : milliseconds It returns the time with string "ms"
getViewInterval Array of 2 integers (unix timestamps) It returns the from and to timestamp of current view
getNextViewInterval Array of 2 integers (unix timestamps) It returns the from and to timestamp of the next view (if user click or swipe to right)
getPrevViewInterval Array of 2 integers (unix timestamps) It returns the from and to timestamp of the previous view (if user click or swipe to left)
getTimestamp Integer : the current unix timestamp viewed
setTimestamp Integer : a unix timestamp Calendar instance It not affects the view, you have to call init to display the update
getView String : the current view It returns 'day', 'week' or 'month'
setView String : 'day' or 'week' or 'month' Calendar instance It not affects the view, you have to call init to display the update
getEventCategoryColor String : any category String : a hexadecimal color prepended by # It affects events only. Return example : '#C62828'
getEventCategoriesColors Array of objects It affects events only. Return example : [{category:"Personnal", color: "#FF8F00"}, {category:"Professionnal", color:"#AD1457"}]
setEventCategoriesColors Array of objects Calendar instance It affects events only. See example of getEventCategoriesColors
getDaynoteCategoryColor String : any category String : a hexadecimal color prepended by # It affects day notes only. Return example : '#EF9A9A'
getDaynoteCategoriesColors Array of objects It affects day notes only. Return example : [{category:"Public holiday", color: "#B39DDB"}]
setDaynoteCategoriesColors Array of objects Calendar instance It affects day notes only. See example of getDaynoteCategoriesColors
getEventColors Array of strings It affects the events only. It returns an array of hexadecimal colors prepended by a #, example : ["#FF8F00", "#9E9D24", "#EF6C00"]
setEventColors Array of strings Calendar instance It affects the events only. See example of getEventColors
getDaynoteColors Array of strings It affects the day notes only. It returns an array of hexadecimal colors prepended by a #, example : ["#FF8F00", "#9E9D24", "#EF6C00"]
setDaynoteColors Array of strings Calendar instance It 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 ;-)

Dependencies (4)

Dev Dependencies (2)

Package Sidebar

Install

npm i arrobefr-jquery-calendar

Repository

github.com/ArrobeFr/jquery-calendar

Homepage

github.com/ArrobeFr/jquery-calendar#readme

Weekly Downloads

1

Version

1.0.12

License

MIT

Unpacked Size

122 kB

Total Files

7

Last publish

Collaborators

  • arrobefr
Try on RunKit
Report malware