Author: | PawanKolhe |
---|---|
Views Total: | 12,160 views |
Official Page: | Go to website |
Last Update: | July 14, 2021 |
License: | MIT |
Preview:

Description:
A flexible, customizable, themeable event calendar & month/year picker component written in vanilla JavaScript.
How to use it:
1. Install & import the Color Calendar as an ES module.
# NPM $ npm i color-calendar
import Calendar from 'color-calendar'; import 'color-calendar/dist/css/theme-basic.css'; import 'color-calendar/dist/css/theme-glass.css';
2. Or directly load the JavaScript and CSS files in the document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css" /> <script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.min.js"></script>
3. Create a container to hold the event calendar.
<div id="color-calendar"></div>
4. Initialize the calendar and done.
new Calendar({ id: '#color-calendar', })
5. Initialize the calendar with events.
const myEvents = [ { start: '2021-04-15T06:00:00', end: '2021-04-15T20:30:00', name: 'Event 1', url: 'https://www.cssscript.com', desc: 'Description 1', // more key value pairs here },{ start: '2021-04-16T06:00:00', end: '2021-04-16T20:30:00', name: 'Event 2', url: 'https://www.cssscript.com', },{ start: '2021-04-16T06:00:00', end: '2021-04-17T20:30:00', name: 'Event 3', url: 'https://www.cssscript.com', }, ],
new Calendar({ id: '#color-calendar', eventsData: myEvents, })
6. Available options to customize the event calendar.
new Calendar({ // small or large calendarSize: 'large', // an array of layout modifiers layoutModifiers: 'month-align-left', // basic | glass theme: 'glass', // custom colors primaryColor: '#1a237e', headerColor: 'rgb(0, 102, 0)', headerBackgroundColor: 'black', weekdaysColor: 'based on theme', // short | long-lower | long-upper weekdayDisplayType: 'short', // short | long monthDisplayType: 'long', // 0 (Sun) startWeekday: 0, // font family fontFamilyHeader: 'based on theme', fontFamilyWeekdays: 'based on theme', fontFamilyBody: 'based on theme', // shadow CSS dropShadow: 'based on theme', // border CSS border: based on theme', // border radius borderRadius: '0.5rem', // disable month year pickers disableMonthYearPickers: false, // disable click on dates disableDayClick: false, // disable the arrows to navigate between months disableMonthArrowClick: false })
7. Events.
new Calendar({ dateChanged: (currentDate, DateEvents) => { // do something }, monthChanged: (currentDate, DateEvents) => { // do something }; })
8. API events.
// set date instance.setDate(date); // reset instance.reset(); // get selected date instance.getSelectedDate(); // set events instance.setEventsData(eventArray); // add events instance.addEventsData(eventArray) // get event data instance.getEventsData(); // set weekday display type instance.setWeekdayDisplayType(type); // set month display type instance.setMonthDisplayType(type);
Changelog:
v1.0.7 (07/14/2021)
- Fix incorrect monthDisplayType
Hello,
How can i use api event in date changed