A javascript drag and drop event calendar, that is fully responsive and compatible with all modern browsers.
📅 One of the world's easiest, most powerful, and fully responsive JavaScript Calendars!
v2.12.2
Calendar.js supports 8 different views (two are modes), which can be accessed from the context menus, and title bar buttons. They are as follows:
All the documentation can be found here.
All modern browsers (such as Google Chrome, FireFox, and Opera) are fully supported.
af Afrikaansar Arabichy Armenianbe Belarusianbn Bengalibg Bulgarianca Catalanzh Chinese (simplified)da Danishnl Dutchen English (default)eo Esperantoet Estonianfa Farsifi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekhe Hebrewhi Hindihu Hungarianis Icelandicid Indonesianga Irishit Italianja Japaneseko Koreanlv Latvianlt Lithuanianlb Luxembourgishms Malayne Nepalino Norwegianpl Polishpt Portuguesero Romaniansi Sinhalesesk Slovaksl Slovenianes Spanishsv Swedishtl Tagalogta Tamilzh-tw Taiwanesete Teluguth Thaitr Turkishuk Ukrainianvi Vietnamese
To see a list of all the most recent changes, click here.
You can install the library with npm into your local modules directory using the following command:
npm install jcalendar.js
Or, you can download the latest zipped up version here.
To get started using Calendar.js, do the following steps:
Make sure you include the "DOCTYPE html" tag at the top of your email, as follows:
<!DOCTYPE html>
<link rel="stylesheet" href="dist/calendar.js.css">
<script src="dist/calendar.js"></script>
<div id="calendar"></div>
<script>
var calendarInstance1 = new calendarJs( "calendar", {
manualEditingEnabled: true
// All your options can be set here
} );
// OR
var calendarElement = document.getElementById( "calendar" );
var calendarInstance2 = new calendarJs( calendarElement, {
manualEditingEnabled: true
// All your options can be set here
} );
</script>
That's it! Nice and simple. Please refer to the code if you need more help (fully documented).
To customize, and get more out of Calendar.js, please read through the following documentation.
Options (which can be set when initializing, or afterwards) allow you to customize how Calendar.js will look and function. The options are also used to set the custom triggers you want to fire when specific actions occur. You can set them manually as follows:
<script>
calendarInstance.setOptions( {
manualEditingEnabled: false,
views: {
fullMonth: {
maximumEventsPerDayDisplay: 0
}
},
visibleDays: [ 0, 1, 2, 3, 4 ]
} );
</script>
To see a list of all the available options you can use, click here.
To see a list of all the available custom triggers you can use, click here.
An event is defined as a JavaScript object, as follows:
<script>
var event = {
from: new Date(),
to: new Date(),
title: "A New Event",
description: "A description of the event"
};
</script>
You can add a new event by using one of the add public functions, as follows:
<script>
calendarInstance.addEvent( event );
</script>
To see a list of all the available event properties and how they should be formatted, click here.
A holiday is a piece of text that is shown under the day number in the month it is assigned to. You can set these holidays in the options, or add them manually as follows:
<script>
var holiday = {
day: today.getDate(),
month: today.getMonth() + 1,
title: "A New Holiday",
};
// This is a public function that you can call
calendarInstance.addHolidays( [ holiday ] );
</script>
To see a list of all the available holiday properties and how they should be formatted, click here.
To see a list of all the public functions available, click here.
Search Options allow you to customize how Calendar.js Search dialog will function. You can set them manually as follows:
<script>
calendarInstance.setSearchOptions( {
matchCase: false
} );
</script>
To see a list of all the available search options you can use, click here.
FAQs
A javascript drag and drop event calendar, that is fully responsive and compatible with all modern browsers.
We found that jcalendar.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.