ArrobeFr / Jquery Calendar
Licence: mit
A responsive jquery calendar scheduler built with bootstrap and moment.js
Stars: ✭ 67
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Jquery Calendar
Devextreme Reactive
Business React components for Bootstrap and Material-UI
Stars: ✭ 1,800 (+2586.57%)
Mutual labels: scheduler, calendar, bootstrap
Bootstrap Email
Bootstrap 4 (and soon 5) stylesheet, compiler, and inliner for responsive and consistent emails with the Bootstrap syntax you know and love.
Stars: ✭ 781 (+1065.67%)
Mutual labels: bootstrap, responsive
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (+1065.67%)
Mutual labels: jquery-plugin, bootstrap
Bootstrap Msg
The jQuery plugin for showing message with Bootstrap alert classes
Stars: ✭ 10 (-85.07%)
Mutual labels: jquery-plugin, bootstrap
Pro Sidebar Template
Responsive sidebar template based on bootstrap
Stars: ✭ 623 (+829.85%)
Mutual labels: bootstrap, responsive
Jquery Smartwizard
The awesome jQuery step wizard plugin
Stars: ✭ 635 (+847.76%)
Mutual labels: jquery-plugin, bootstrap
Angular Bootstrap Calendar
A port of the bootstrap calendar widget to AngularJS (no jQuery required!)
Stars: ✭ 803 (+1098.51%)
Mutual labels: calendar, bootstrap
Gridstrap.js
gridstrap.js is a jQuery plugin designed to take Bootstrap's CSS grid system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour.
Stars: ✭ 32 (-52.24%)
Mutual labels: jquery-plugin, bootstrap
Bootstrap Show Modal
A Bootstrap 4 / jQuery plugin wrapper, to create modals dynamically in JavaScript
Stars: ✭ 38 (-43.28%)
Mutual labels: jquery-plugin, bootstrap
Gantt Schedule Timeline Calendar
Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ]
Stars: ✭ 990 (+1377.61%)
Mutual labels: scheduler, calendar
Bootstrap Fileinput
An enhanced HTML 5 file input for Bootstrap 5.x/4.x./3.x with file preview, multiple selection, and more features.
Stars: ✭ 5,097 (+7507.46%)
Mutual labels: jquery-plugin, bootstrap
Jquery.sumoselect
A jQuery Single/Multi Select plugin which can be used on almost any device
Stars: ✭ 527 (+686.57%)
Mutual labels: jquery-plugin, responsive
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (+955.22%)
Mutual labels: calendar, responsive
Responsiveframework
Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https://gallery.codelessly.com/flutterwebsites/minimal/
Stars: ✭ 476 (+610.45%)
Mutual labels: bootstrap, responsive
Django Admin Bootstrap
Responsive Theme for Django Admin With Sidebar Menu
Stars: ✭ 787 (+1074.63%)
Mutual labels: bootstrap, responsive
Bootstrap Dark
The Definitive Guide to Dark Mode and Bootstrap 4 - A proof of concept
Stars: ✭ 54 (-19.4%)
Mutual labels: bootstrap, responsive
Coderedcms
A content management system for marketing websites based on Django and Wagtail.
Stars: ✭ 386 (+476.12%)
Mutual labels: bootstrap, responsive
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
Mobile user
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/[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="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
andCalendar.event-mouseenter
- When
- The mouse is hover an event or a day note for a while (see
event.hover.delay
under configuration)
- The mouse is hover an event or a day note for a while (see
- 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
andCalendar.event-mouseleave
- It is the same as
Calendar.daynote-mouseenter
andCalendar.event-mouseenter
but when the mouse leave the event - Default, restore the event or day note state before the default of
Calendar.daynote-mouseenter
andCalendar.event-mouseenter
Calendar.daynote-click and Calendar.event-click
-
Calendar.daynote-click
andCalendar.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 ;-)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].