pawankolhe / color-calendar Goto Github PK

View Code? Open in Web Editor NEW

175.0 5.0 69.0 5.14 MB

📅 A customizable calendar JavaScript UI widget/component library with the ability to show events.

Home Page: https://www.npmjs.com/package/color-calendar

License: MIT License

JavaScript 2.82% TypeScript 74.95% SCSS 22.23%

color-calendar calendar calendar-widget calendar-picker date-picker calendar-ui javascript

color-calendar's Introduction

Color Calendar

A customizable events calendar component library. Checkout Demo 1, Demo 2 and Demo 3.

Features
Getting Started
- CDN
- NPM
Usage
- Basic
- React
- Vue
Options
Events
Methods
Types
Themes
Bug Reporting
Feature Request
Release Notes
License

🚀 Features

Zero dependencies
Add events to calendar
Perform some action on calendar date change
Month and year picker built-in
Themes available
Fully customizable using CSS variables, passing options parameters while creating calendar, or overriding CSS.
Request more features...

📦 Getting Started

CDN

JavaScript

<script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.js">

Also available on unpkg.

CSS

Pick a css file according to the theme you want.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css"
/>
<!-- or -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-glass.css"
/>

Fonts

Get fonts from Google Fonts

<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

Check what fonts the theme needs or pass your own fonts in options.

NPM

You might need to use a module bundler such as webpack, rollup, parcel, etc.

Installation

npm i color-calendar

Import

import Calendar from "color-calendar";

CSS

import "color-calendar/dist/css/theme-<THEME-NAME>.css";

Then add fonts.

🔨 Usage

Basic

JavaScript

new Calendar();

Or you can pass in options.

new Calendar({
  id: "#color-calendar",
  calendarSize: "small",
});

HTML

<div id="color-calendar"></div>

Example

React

Example

Vue

Example

⚙️ Options

`id`

Type: String
Default: #color-calendar

Selector referencing HTMLElement where the calendar instance will bind to.

`calendarSize`

Type: String
Default: large
Options: small | large

Size of calendar UI.

`layoutModifiers`

Type: LayoutModifier[]
Default: []
Example: ['month-left-align']

Modifiers to alter the layout of the calendar.

`eventsData`

Type: EventData[]
Default: null

[
    {
        start: '2020-08-17T06:00:00',
        end: '2020-08-18T20:30:00',
        name: 'Blockchain 101'
      ...
    },
    ...
]

Array of objects containing events information.

Note: Properties start and end are required for each event in the ISO 8601 date and time format. You can optionally choose to add other properties.

`theme`

Type: String
Default: basic
Options: basic | glass

Choose from available themes.

`primaryColor`

Type: String
Default: based on theme
Example: #1a237e

Main color accent of calendar. Pick a color in rgb, hex or hsl format.

`headerColor`

Type: String
Default: based on theme
Example: rgb(0, 102, 0)

Color of header text.

`headerBackgroundColor`

Type: String
Default: based on theme
Example: black

Background color of header. Only works on some themes.

`weekdaysColor`

Type: String
Default: based on theme

Color of weekdays text. Only works on some themes.

`weekdayDisplayType`

Type: String
Default: short
Options: WeekdayDisplayType (short | long-lower | long-upper)

Select how weekdays will be displayed. E.g. M, Mon, or MON.

`monthDisplayType`

Type: String
Default: long
Options: MonthDisplayType (short | long)

Select how month will be displayed in header. E.g. Feb, February.

`startWeekday`

Type: Number
Default: 0
Options: 0 | 1 | 2 | 3 | 4 | 5 | 6

Starting weekday. Mapping: 0 (Sun), 1 (Mon), 2 (Tues), 3 (Wed), 4 (Thurs), 5 (Fri), 6 (Sat)

`fontFamilyHeader`

Type: String
Default: based on theme
Example value: 'Open Sans', sans-serif

Font of calendar header text.

`fontFamilyWeekdays`

Type: String
Default: based on theme

Font of calendar weekdays text.

`fontFamilyBody`

Type: String
Default: based on theme

Font of calendar days as well as month and year picker text.

`dropShadow`

Type: String
Default: based on theme

Set CSS of calendar drop shadow.

`border`

Type: String
Default: based on theme
Example value: 5px solid black

Set CSS style of border.

`borderRadius`

Type: String
Default: 0.5rem

Set CSS border radius of calendar.

`disableMonthYearPickers`

Type: Boolean
Default: false

If month and year picker should be disabled.

`disableDayClick`

Type: Boolean
Default: false

If day click should be disabled.

`disableMonthArrowClick`

Type: Boolean
Default: false

If month arrows should be disabled.

`customMonthValues`

Type: String[]
Default: undefined

Set custom display values for Month.

`customWeekdayValues`

Type: String[]
Default: undefined

Set custom display values for Weekdays.

["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];

🖱 Events

`dateChanged`

Type: Function
Props:

currentDate
- Type: Date
- Currently selected date
filteredDateEvents
- Type: EventData[]
- All events on that particular date

const options = {
    ...
    dateChanged: (currentDate?: Date, filteredDateEvents?: EventData[]) => {
        // do something
    };
    ...
}

Emitted when the selected date is changed.

`selectedDateClicked`

Type: Function
Props:

currentDate
- Type: Date
- Currently selected date
filteredMonthEvents
- Type: EventData[]
- All events on that particular month

Emitted when the selected date is clicked.

`monthChanged`

Type: Function
Props:

currentDate
- Type: Date
- Currently selected date
filteredMonthEvents
- Type: EventData[]
- All events on that particular month

Emitted when the current month is changed.

🔧 Methods

`reset()`

Reset calendar to today's date.

// Example
let myCal = new Calendar();
myCal.reset();

`setDate()`

Props:

Props	Type	Required	Description
date	Date	required	New date to be set

Set new selected date.

// Example
myCal.setDate(new Date());

`getSelectedDate()`

Return:

Type: Date
Description: Currently selected date

Get currently selected date.

`getEventsData()`

Return:

Type: EventData[]
Description: All events

Get events array.

`setEventsData()`

Props:

Props	Type	Required	Description
events	EventData[]	required	Events to be set

Return:

Type: Number
Description: Number of events set

Set a new events array.

`addEventsData()`

Props:

Props	Type	Required	Description
events	EventData[]	required	Events to be added

Return:

Type: Number
Description: Number of events added

Add events of the events array.

`setWeekdayDisplayType()`

Props:

Props	Type	Required	Description
weekdayDisplayType	WeekdayDisplayType	required	New weekday type

Set weekdays display type.

// Example
myCal.setWeekdayDisplayType("short");

`setMonthDisplayType()`

Props:

Props	Type	Required	Description
monthDisplayType	MonthDisplayType	required	New month display type

Set month display type.

💎 Types

`EventData`

{
    start: string,    // ISO 8601 date and time format
    end: string,      // ISO 8601 date and time format
    [key: string]: any,
}

`WeekdayDisplayType`

"short" | "long-lower" | "long-upper"

// "short"
M T W ...

// "long-lower"
Mon Tue Wed ...

// "long-upper"
MON TUE WED ...

`MonthDisplayType`

"short" | "long"

// "short"
Jan Feb Mar ...

// "long"
January February March ...

`LayoutModifier`

"month-align-left"

🎨 Themes

Currently 2 themes available. More on the way.

`basic`

CSS Custom Properties

--cal-color-primary: #000000;
--cal-font-family-header: "Work Sans", sans-serif;
--cal-font-family-weekdays: "Work Sans", sans-serif;
--cal-font-family-body: "Work Sans", sans-serif;
--cal-drop-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
--cal-border: none;
--cal-border-radius: 0.5rem;
--cal-header-color: black;
--cal-weekdays-color: black;

`glass`

CSS Custom Properties

--cal-color-primary: #EC407A;
--cal-font-family-header: 'Open Sans', sans-serif;
--cal-font-family-weekdays: 'Open Sans', sans-serif;
--cal-font-family-body: 'Open Sans', sans-serif;
--cal-drop-shadow: 0 7px 30px -10px rgba(150, 170, 180, 0.5);
--cal-border: none;
--cal-border-radius: 0.5rem;
--cal-header-color: white;
--cal-header-background-color: rgba(0, 0, 0, 0.3);

🐛 Bug Reporting

Feel free to open an issue on GitHub if you find any bug.

⭐ Feature Request

Feel free to Open an issue on GitHub to request any additional features you might need for your use case.
Connect with me on LinkedIn. I'd love ❤️️ to hear where you are using this library.

📋 Release Notes

Check here for release notes.

📜 License

This software is open source, licensed under the MIT License.

color-calendar's People

Contributors

Stargazers

Watchers

color-calendar's Issues

Current day and first day of newly toggled month are unclickable on mobile 2.

Im opening the same issue as the issue below because no one is commenting and the issue is old anyway, please answer ASAP. Thanks.

Allow "month change" by clicking on "other" days at the start/end of the displayed month.

I'm loving this calendar library!

Would be great if my users could click on the greyed out days at the end or start of the month, and have this trigger a transition to the next/prev month, where it would automatically select the day that the user clicked on, instead of the first day of the new month.

Cheers!

i18n

Hello,

thanks for the nice calendar.
I plan on using this in a multi-language website. Is there any way to localize the calendar?

Cheers mate.

Getting data

current day remain selected even if you change date

i notice that even if i change date on the calendar the current day remain higlithed with the custom background.

i want to disable this for user friendly questions

i'm using this plugin for a chek-in/check-out component.

Also it is possible to start another calendar and setting the current day to the next day based on the selected day of the previous calendar?

Set date range to display

Is it possible to select a range of dates in the calendar? For example, you need to display events in the period from 2022-05-05 to 2022-08-08. Other dates are not available for selection. Thanks.

How to configure date month only picker

Thanks for the script! Looks nice.

I have problem finding a configuration option how to create month/year only picker like it's shown on the screenshot (bottom third example). Maybe I am missing something.

Events longer than 1 month are not displayed

Events that start on one month and end on another are not being displayed at all. In the reproduction code there are three events, 1 day long, 1 week long and 1 month long, but only the first two are in the calendar.

Reproduction code

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/color-calendar/dist/css/theme-basic.css" />
  <script src="https://cdn.jsdelivr.net/npm/color-calendar/dist/bundle.js"></script>
</head>
<body>
  <div id="color-calendar"></div>
  <div class="dayEvents"></div>
  <script>
    const today = new Date();
    const eventsData = [
      { start: today, end: today, name: "one day event" },
      { start: today, end: new Date(new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000)), name: "one week event" },
      { start: today, end: new Date(new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000)), name: "one month event" },
    ];
    new Calendar({
      id: "#color-calendar",
      calendarSize: "large",
      eventsData,
      dateChanged: (_date, events) => {
        document.querySelector(".dayEvents").innerText = JSON.stringify(events, null, "  ");
      },
    });
  </script>
</body>
</html>

Same code on codepen.io

Translate weekdays

Hi, is there a way to translate the weekdays? Changing the values (of long-lower for example) in bundle.js doesn't do anything. Thanks in advance!

Refactor code into separate manageable modules

Create modules/ folder with different .ts files for each module.

How to change event dots colors

I have a list of events which is categorized as "Casual" & "Sick" so how can I have different colors for each events category?

Disable days

Hi, how i can programmatically disable days in month?

Multiple Date selected Effect

How can I give color to multiple dates like color/ affect given to current date, I want to give different color on different dates. How can I resolve this issue in color-calendar npm , Thanks.

How can I add eventsData from a external json file?

Its possible? Populate my calendar with events from another json file?

Current day and first day of newly toggled month are unclickable on mobile.

When viewing on ios 16 the current day is preselected on load however it doesn't unselect when tapping a new day and you can't return to it by tapping.

The same thing happens when toggling to a different month, the 1st day of the month is preselected but becomes untappable.

Multiple selected dates in Safari

In Safari (15.5 (17613.2.7.1.8)) there are always two selected dates shown. In Google Crome it works well.

Is there a trigger event for clicking the current day?

When clicking a different day, dateChanged is triggered, but what about clicking the existing selected day? Is there a way to have something happen when clicking the current day? Even having it trigger dateChanged is ok with me. Currently I have to click another day and then click back the original date to trigger a dateChanged for the existing day.

Customize weekend days

I'd like to customize weekend days, for example, disable them and/or change their color. How can I do this?
Thanks in advance.

Disable all the days before the currentDay

I want to disable all the days before the current date and add a different class to those disabled days

Date ranges that go beyond one month are not displayed

Date ranges like 24.09. to 05.10. are not displayed correctly in the calendar. The error is in the file src/modules/day/day.ts in lines 218-224.

Please add more themes

There are only two themes available as of now. Please add a few more teams.

Can you make usage guidelines for react?

An example can help! Thanks

Setting for bullets for each event on a current date

Hi,

Thanks for this nice library. Works great and is very modular :).

On this line: https://github.com/PawanKolhe/color-calendar/blob/master/src/modules/day/day.ts#L256 the code adds a bullet when an event has a date. Something that might be a good addition is a way to add multiple bullets for each event on a date. Is this already possible? If not? Would love to see it added in the near future.

Thanks!

Error When Event Data is Added

When Event data is added the calendar is getting hidden.

Is there any way to limit the date range?

I would like the calendar to only allow viewing/selecting days that are in the next 3 months and none from the past. Any ways to currently disable browsing/selecting dates outside of a specified range?

Calendar 1

Error TS2307: Cannot find module './types.d' or its corresponding type declarations.

I tried to follow instructions but when I try to build my typescipt project I get an error:

...node_modules/color-calendar/dist/index.d.ts(1,141): Error TS2307: Cannot find module './types.d' or its corresponding type declarations.

Please help.

Best Regards,
Tom

Reccuring events

We would like to manage recurring events. For example, we want to add an event every Monday from today until December of the current year. We would like also to set manually the language for days and months. Thanks in advance

customWeekdayValues seems to not working

I tried set up customWeekdayValues in calendar options but it seems to not working.
My setup is like this:

let calA = new Calendar({
id: "#calendar-a",
theme: "basic",
customWeekdayValues: ["Pon", "Wto", "Sro", "Czw", "Ptk", "Sob", "Nie"],
weekdayDisplayType: "long-lower"
})

Omit certain dates

Does this have the ability to hide certain dates?
I want the user to only be able to select x, y date but not z date.

Right now the unselectable dates are the ones that aren't in the same month

Changing months also changes 'current date'

when moving between months, this also fires the event dateChanged

I notice that dateChanged fires when moving through months. This doesn't make sense as there is also a monthChanged event.

is there a way to isolate dateChanged to only fire when a date has been clicked on?

Link of Demo1 in Readme.md file of color-calendar is not working.

When I clicked on Demo1, it showed an error.

angular throws error

Error: node_modules/color-calendar/dist/index.d.ts:1:141 - error TS2307: Cannot find module './types.d' or its corresponding type declarations.

import { CalendarSize, LayoutModifier, CalendarOptions, EventData, Day, MonthDisplayType, WeekdayDisplayType, Weekdays, StartWeekday } from "./types.d";

pawankolhe / color-calendar Goto Github PK

color-calendar's Introduction

Color Calendar

🚀 Features

📦 Getting Started

CDN

JavaScript

CSS

Fonts

NPM

Installation

Import

CSS

🔨 Usage

Basic

JavaScript

HTML

React

Vue

⚙️ Options

id

calendarSize

layoutModifiers

eventsData

theme

primaryColor

headerColor

headerBackgroundColor

weekdaysColor

weekdayDisplayType

monthDisplayType

startWeekday

fontFamilyHeader

fontFamilyWeekdays

fontFamilyBody

dropShadow

border

borderRadius

disableMonthYearPickers

disableDayClick

disableMonthArrowClick

customMonthValues

customWeekdayValues

🖱 Events

dateChanged

selectedDateClicked

monthChanged

🔧 Methods

reset()

setDate()

getSelectedDate()

getEventsData()

setEventsData()

addEventsData()

setWeekdayDisplayType()

setMonthDisplayType()

💎 Types

EventData

WeekdayDisplayType

MonthDisplayType

LayoutModifier

🎨 Themes

basic

CSS Custom Properties

glass

CSS Custom Properties

🐛 Bug Reporting

⭐ Feature Request

📋 Release Notes

📜 License

color-calendar's People

Contributors

Stargazers

Watchers

Forkers

color-calendar's Issues

Recommend Projects

Recommend Topics

Recommend Org

`id`

`calendarSize`

`layoutModifiers`

`eventsData`

`theme`

`primaryColor`

`headerColor`

`headerBackgroundColor`

`weekdaysColor`

`weekdayDisplayType`

`monthDisplayType`

`startWeekday`

`fontFamilyHeader`

`fontFamilyWeekdays`

`fontFamilyBody`

`dropShadow`

`border`

`borderRadius`

`disableMonthYearPickers`

`disableDayClick`

`disableMonthArrowClick`

`customMonthValues`

`customWeekdayValues`

`dateChanged`

`selectedDateClicked`

`monthChanged`

`reset()`

`setDate()`

`getSelectedDate()`

`getEventsData()`

`setEventsData()`

`addEventsData()`

`setWeekdayDisplayType()`

`setMonthDisplayType()`

`EventData`

`WeekdayDisplayType`

`MonthDisplayType`

`LayoutModifier`

`basic`

`glass`