arrobefr-jquery-calendar-bs4

v1.0.3

Published

2 years ago

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

Downloads

105

0High
0Medium
0Low

arrobefr

jquery-plugin ecosystem:jquery moment.js bootstrap bootstrap4 bootstrap 4 calendar scheduler responsive

jquery-calendar-bs4

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

Switch to bootstrap 3

This plugins was originally made for bootstrap 3. 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

Mobile user

Installation

Using NPM

npm install arrobefr-jquery-calendar-bs4

Using a CDN

use of the latest version on cdn.jsdelivr.net

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/jquery-calendar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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="dist/js/jquery-calendar.min.js"></script>
  <link rel="stylesheet" href="dist/css/jquery-calendar.min.css">
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css">
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css">
  <title>Calendar</title>
</head>
<body>
  <div class="container-fluid px-4">
    <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

Events array

Attributes

The array of events contains objects that have these attributes :

DayNotes array

Attributes

The array of events contains objects that have these attributes :

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 ;-)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

jquery-calendar-bs4

Switch to bootstrap 3

Screenshots

Desktop user

Mobile user

Installation

Using NPM

Using a CDN

Usage

Simple example

Full documentation

HTML

JavaScript

Configuration

Events array

Attributes

DayNotes array

Attributes

Functions

Example

Functions list

Events

Example

Cancel default event action

Events list

Calendar.init

Calendar.daynote-mouseenter and Calendar.event-mouseenter

Calendar.daynote-mouseleave and Calendar.event-mouseleave

Calendar.daynote-click and Calendar.event-click

Contributing