{"id":15024286,"url":"https://github.com/arrobefr/jquery-calendar","last_synced_at":"2025-04-12T06:20:41.017Z","repository":{"id":57184273,"uuid":"134834528","full_name":"ArrobeFr/jquery-calendar","owner":"ArrobeFr","description":"A responsive jquery calendar scheduler built with bootstrap and moment.js","archived":false,"fork":false,"pushed_at":"2022-08-19T11:18:10.000Z","size":2424,"stargazers_count":97,"open_issues_count":7,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-26T01:41:26.390Z","etag":null,"topics":["bootstrap","calendar","javascript","jquery-plugin","responsive","scheduler"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArrobeFr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-25T09:25:52.000Z","updated_at":"2025-03-21T19:43:15.000Z","dependencies_parsed_at":"2022-09-10T22:40:17.763Z","dependency_job_id":null,"html_url":"https://github.com/ArrobeFr/jquery-calendar","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArrobeFr%2Fjquery-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArrobeFr%2Fjquery-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArrobeFr%2Fjquery-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArrobeFr%2Fjquery-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArrobeFr","download_url":"https://codeload.github.com/ArrobeFr/jquery-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248525753,"owners_count":21118747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","calendar","javascript","jquery-plugin","responsive","scheduler"],"created_at":"2024-09-24T20:00:04.410Z","updated_at":"2025-04-12T06:20:40.987Z","avatar_url":"https://github.com/ArrobeFr.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jquery-calendar\n\nA responsive jquery calendar scheduler built with bootstrap and moment.js\n\n## Switch to bootstrap 4\n\nIt was released with bootstrap 4 ! [Here it is](https://github.com/ArrobeFr/jquery-calendar-bs4)\n\n## Screenshots\n\nScreenshots are made using the `example/example.html`. There is events on one week only, so some parts of calendar are empty.\n\n### Desktop user\n\n![screenshots/Desktop user.gif](https://raw.githubusercontent.com/ArrobeFr/jquery-calendar/master/screenshots/Desktop%20user.gif)\n\n### Mobile user\n\n![screenshots/Mobile user.gif](https://raw.githubusercontent.com/ArrobeFr/jquery-calendar/master/screenshots/Mobile%20user.gif)\n\n## Demo\n\n[Here is a full demo](https://cdn.rawgit.com/ArrobeFr/jquery-calendar/7b9d42aa/example/demo.html)\n\n## Installation\n\n### Using NPM\n\n`npm install arrobefr-jquery-calendar`\n\n### Using a CDN\n\n*use of the latest version on cdn.jsdelivr.net*\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/arrobefr-jquery-calendar@1.0.11/dist/js/jquery-calendar.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/arrobefr-jquery-calendar@1.0.11/dist/css/jquery-calendar.min.css\"\u003e\n```\n\n## Usage\n\n### Simple example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"fr\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"node_modules/bootstrap/dist/css/bootstrap.min.css\"\u003e\n  \u003cscript src=\"node_modules/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"node_modules/bootstrap/dist/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"node_modules/moment/min/moment-with-locales.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"node_modules/jquery-touchswipe/jquery.touchSwipe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"node_modules/arrobefr-jquery-calendar/dist/js/jquery-calendar.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"node_modules/arrobefr-jquery-calendar/dist/css/jquery-calendar.min.css\"\u003e\n  \u003ctitle\u003eCalendar\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"container-fluid\"\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col-xs-12\"\u003e\n        \u003cdiv id=\"calendar\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n    $(document).ready(function(){\n      moment.locale('fr');\n      var now = moment();\n      $('#calendar').Calendar({\n        events: [\n          { // An event on the current week on Wednesday from 10h to 12h\n            start: now.startOf('week').isoWeekday(3).startOf('day').add(10, 'h'),\n            end: now.startOf('week').isoWeekday(3).startOf('day').add(12, 'h'),\n            title: 'An event title !',\n            content: 'Hello World! \u003cbr\u003eFoo Bar\u003cp class=\"text-right\"\u003eWow this text is right aligned !\u003c/p\u003e',\n            category: 'A test category name'\n          }\n        ]\n      }).init();\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Full documentation\n\n### HTML\n\nAdd a div somewhere that is unique, with an id for example\n\n```html\n\u003cdiv id=\"calendar\"\u003e\u003c/div\u003e\n```\n\n### JavaScript\n\n#### Configuration\n\n|Argument|Type|Default value|Link / Description|\n|--|--|--|--|\n|`locale`|*string*|**'fr'**|[See Moment.js docs](https://momentjs.com/docs/#/i18n/changing-locale/)|\n|`enableKeyboard`|*boolean*|**true**|Enables or disables the keyboard shortcuts|\n|`defaultView.largeScreen`|*string*|**'week'**|Defines the default view to load for large screen, **value must be 'day', 'week', 'month'**|\n|`defaultView.smallScreen`|*string*|**'day'**|Defines the default view to load for small screen, **value must be 'day', 'week', 'month'**|\n|`defaultView.smallScreenThreshold`|*integer*|**1000**|Defines the threshold to consider a screen small. The value is in pixels|\n|`weekday.timeline.fromHour`|*integer*|**7**|Start hour of timeline|\n|`weekday.timeline.toHour`|*integer*|**20**|End hour of timeline|\n|`weekday.timeline.intervalMinutes`|*integer*|**60**|The time interval of timeline ; each 5, 15, 30, 60, 120, ... minutes|\n|`weekday.timeline.format`|*string*|**'HH:mm'**|The time format in timeline and modal ; [see Moment.js docs](https://momentjs.com/docs/#/parsing/string-format/)|\n|`weekday.timeline.heightPx`|*integer*|**50**|The height in pixels of timeline, it must not be under the bootstrap font-size|\n|`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 !**|\n|`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](https://momentjs.com/docs/#/get-set/iso-weekday/)|\n|`weekday.dayline.format`|*string*|**'dddd DD/MM'**|The time format of days ; [see Moment.js docs](https://momentjs.com/docs/#/parsing/string-format/)|\n|`weekday.dayline.heightPx`|*integer*|**30**|The height in pixels of dayline, it must not be under the bootstrap font-size|\n|`weekday.dayline.month.format`|*string*|**'MMMM YYYY'**|The time format of month header ; [see Moment.js docs](https://momentjs.com/docs/#/parsing/string-format/)|\n|`weekday.dayline.month.heightPx`|*integer*|**30**|The height in pixels of month header|\n|`weekday.dayline.month.weekFormat`|*string*|**'w'**|The format of week number ; [see Moment.js docs](https://momentjs.com/docs/#/parsing/string-format/)|\n|`unixTimestamp`|*integer*|**moment().format('X')**|Any timestamp in the week to display, defaults to current week|\n|`event.hover.delay`|*integer*|**500**|Time to wait hover before display full event|\n|`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]|\n|`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]|\n|`colors.random`|*boolean*|**true**|Randomize the color order|\n|`categories.enable`|*boolean*|**true**|Enable or disable the categories header|\n|`categories.hover.delay`|*integer*|**500**|Milliseconds to wait before animation|\n|`now.enable`|*boolean*|**false**|Enable or disable a `\u003chr\u003e` that represents the current time (now)|\n|`now.refresh`|*boolean*|**false**|Enable or disable the refresh of this `\u003chr\u003e`, it follows the time|\n|`now.heightPx`|*integer*|**1**|The `\u003chr\u003e`'s weight|\n|`now.style`|*string*|**'solid'**|The `\u003chr\u003e`'s style, see [CSS border style docs](https://www.w3schools.com/cssref/pr_border-style.asp)|\n|`now.color`|*string*|**'#03A9F4'**|The `\u003chr\u003e`'s color|\n|`events`|*array*|**[]**|An array of events object, see the docs of **Events array** below|\n|`daynotes`|*array*|**[]**|An array of object, see the docs of **DayNotes array** below|\n\n#### Events array\n\n##### Attributes\n\nThe array of events contains objects that have these attributes :\n\n|Attribute|Type|Description|\n|--|--|--|\n|`start`|*integer*|The start timestamp of event|\n|`end`|*integer*|The end timestamp of event|\n|`title`|*string*|Any text|\n|`content`|*string*|HTML content|\n|`category`|*string*|**Optionnal** if you want different colors grouped by a category or something else|\n\n#### DayNotes array\n\n##### Attributes\n\nThe array of events contains objects that have these attributes :\n\n|Attribute|Type|Description|\n|--|--|--|\n|`time`|*integer*|Any timestamp in the day|\n|`title`|*string*|Any text|\n|`content`|*string*|HTML content|\n|`category`|*string*|**Optionnal** if you want different colors grouped by a category or something else|\n\n#### Functions\n\n##### Example\n\n```js\nvar calendar = $('#calendar').Calendar({...});\nvar result = calendar.function(); // It is just an example, replace \"function\" by one of the list below\n```\n\n##### Functions list\n\n|Function|Arguments|Return|Note|\n|--|--|--|--|\n|`init`||*Calendar instance*|**It must be called after any modification to re-draw the calendar**|\n|`getEvents`||Array of events objects|*Returns events loaded in this instance of Calendar*|\n|`setEvents`|Array of events objects|*Calendar instance*|**It replaces events !**|\n|`addEvents`|Array of events objects|*Calendar instance*|*It just adds events (it not replaces events)*|\n|`getDaynotes`||Array of day notes objects|*Returns day notes loaded in this instance of Calendar*|\n|`setDaynotes`|Array of day notes objects|*Calendar instance*|**It replaces day notes !**|\n|`addDaynotes`|Array of day notes objects|*Calendar instance*|*It just adds day notes (it not replaces day notes)*|\n|`getInitTime`||String : milliseconds|*It returns the time with string \"ms\"*|\n|`getViewInterval`||Array of 2 integers (unix timestamps)|*It returns the from and to timestamp of current view*|\n|`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)*|\n|`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)*|\n|`getTimestamp`||Integer : the current unix timestamp viewed||\n|`setTimestamp`|Integer : a unix timestamp|*Calendar instance*|*It not affects the view, you have to call init to display the update*|\n|`getView`||String : the current view|*It returns 'day', 'week' or 'month'*|\n|`setView`|String : 'day' or 'week' or 'month'|*Calendar instance*|*It not affects the view, you have to call init to display the update*|\n|`getEventCategoryColor`|String : any category|String : a hexadecimal color prepended by #|It affects events only. Return example : `'#C62828'`|\n|`getEventCategoriesColors`||Array of objects|It affects events only. Return example : `[{category:\"Personnal\", color: \"#FF8F00\"}, {category:\"Professionnal\", color:\"#AD1457\"}]`|\n|`setEventCategoriesColors`|Array of objects|*Calendar instance*|It affects events only. *See example of* `getEventCategoriesColors`|\n|`getDaynoteCategoryColor`|String : any category|String : a hexadecimal color prepended by #|It affects day notes only. Return example : `'#EF9A9A'`|\n|`getDaynoteCategoriesColors`||Array of objects|It affects day notes only. Return example : `[{category:\"Public holiday\", color: \"#B39DDB\"}]`|\n|`setDaynoteCategoriesColors`|Array of objects|*Calendar instance*|It affects day notes only. *See example of* `getDaynoteCategoriesColors`|\n|`getEventColors`||Array of strings|It affects the events only. It returns an array of hexadecimal colors prepended by a #, example : `[\"#FF8F00\", \"#9E9D24\", \"#EF6C00\"]`|\n|`setEventColors`|Array of strings|*Calendar instance*|It affects the events only.  *See example of* `getEventColors`|\n|`getDaynoteColors`||Array of strings|It affects the day notes only. It returns an array of hexadecimal colors prepended by a #, example : `[\"#FF8F00\", \"#9E9D24\", \"#EF6C00\"]`|\n|`setDaynoteColors`|Array of strings|*Calendar instance*|It affects the day notes only.  *See example of* `getEventColors`|\n\n#### Events\n\n##### Example\n\n```js\nvar calendar = $('#calendar').Calendar({...});\n$('#calendar').on('event name', function(event, arg1, arg2, ...){...});\n$('#calendar').unbind('event name').on('event name', function(event, arg1, arg2, ...){...});\n```\n\n##### Cancel default event action\n\nExample : deactivate the click on event or day note\n\n```js\nvar calendar = $('#calendar').Calendar({...});\n$('#calendar').unbind('Calendar.event-click');\n```\n\n##### Events list\n\n###### Calendar.init\n\n- `Calendar.init`\n- When\n  - View changes (day, week or month)\n  - View moves (left or right)\n  - Manually called by you\n- Arguments\n  - `event`\n    - The jQuery event\n  - `instance`\n    - The Calendar instance\n  - `before`\n    - An array of 2 unix timestamp of the previous view (on left)\n    - Example on a week `[1526248800, 1526853599]`\n  - `current`\n    - An array of 2 unix timestamp of the current view\n    - Example on a week `[1526853600, 1527458399]`\n  - `after`\n    - An array of 2 unix timestamp of the next view (on right)\n    - Example on a week `[1527458400, 1528063199]`\n- Example :\n\n```js\nvar calendar = $('#calendar').Calendar({...});\n$('#calendar').on('Calendar.init', function(event, instance, before, current, after){\n  console.log(event);     // jQuery event\n  console.log(instance);  // Equals to var calendar above\n  console.log(before);    // Array of the past view interval [unixTimestampFrom, unixTimestampTo]\n  console.log(current);   // Array of the current view interval [unixTimestampFrom, unixTimestampTo]\n  console.log(after);     // Array of the next view interval [unixTimestampFrom, unixTimestampTo]\n});\n```\n\n###### Calendar.daynote-mouseenter and Calendar.event-mouseenter\n\n- `Calendar.daynote-mouseenter` and `Calendar.event-mouseenter`\n- When\n  - The mouse is hover an event or a day note for a while (see `event.hover.delay` under configuration)\n- Default\n  - Enlarge the event or day note over the others\n- Arguments\n  - `event`\n    - The jQuery event\n  - `instance`\n    - The Calendar instance\n  - `elem`\n    - The jQuery element which triggered the event\n- Example :\n\n```js\nvar calendar = $('#calendar').Calendar({...});\n$('#calendar').on('Calendar.daynote.mouseenter', function(event, instance, elem){\n  console.log(event);     // jQuery event\n  console.log(instance);  // Equals to var calendar above\n  console.log(elem);      // Use elem to make an animation or somthing else\n});\n```\n\n###### Calendar.daynote-mouseleave and Calendar.event-mouseleave\n\n- `Calendar.daynote-mouseleave` and `Calendar.event-mouseleave`\n- It is the same as `Calendar.daynote-mouseenter` and `Calendar.event-mouseenter` but when the mouse leave the event\n- Default, restore the event or day note state before the default of `Calendar.daynote-mouseenter` and `Calendar.event-mouseenter`\n\n###### Calendar.daynote-click and Calendar.event-click\n\n- `Calendar.daynote-click` and `Calendar.event-click`\n- When\n  - The user click or touch an event or a day note\n- Default\n  - Opens a bootstrap modal to display the event\n- Arguments\n  - `event`\n    - The jQuery event\n  - `instance`\n    - The Calendar instance\n  - `elem`\n    - The jQuery element which triggered the event\n  - `evt`\n    - The event object you gived which triggered the event (so you have : start, end, title, content, category, anything else if you gived more attributes)\n- Example :\n\n```js\nvar calendar = $('#calendar').Calendar({...});\n$('#calendar').on('Calendar.daynote-click', function(event, instance, elem, evt){\n  console.log(event);     // jQuery event\n  console.log(instance);  // Equals to var calendar above\n  console.log(elem);      // Use elem to make an animation or somthing else\n  console.log(evt);       // You have all informations to display it in a modal\n});\n```\n\n## Contributing\n\nFeel free to report bugs or make a pull request ;-)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farrobefr%2Fjquery-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farrobefr%2Fjquery-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farrobefr%2Fjquery-calendar/lists"}