pawankolhe/color-calendar

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

Building the web. One line at a time.

💛 In love with JavaScript
🎨 Love writing CSS / Sass
🔭 Currently working with TypeScript 🟦, React 💙, Redux 🟣, Strapi 🟪
⭐️ Previously worked with Vuejs 💚, Angular ❤️, Ionic 🔵, MobX 🟧, Next.js 🖤
🌱 Learning Python 🐍 and Cloud ☁️
💬 Ask me anything web dev

I'm a Night 🦉

🌞 Morning    98 commits     ███░░░░░░░░░░░░░░░░░░░░░░   15.38% 
🌆 Daytime    199 commits    ███████░░░░░░░░░░░░░░░░░░   31.24% 
🌃 Evening    242 commits    █████████░░░░░░░░░░░░░░░░   37.99% 
🌙 Night      98 commits     ███░░░░░░░░░░░░░░░░░░░░░░   15.38%

📊 This Week I Spent My Time On

💬 Programming Languages: 
JavaScript               23 hrs 50 mins      ██████████████░░░░░░░░░░░   55.73% 
SCSS                     12 hrs 48 mins      ███████░░░░░░░░░░░░░░░░░░   29.95% 
HTML                     3 hrs 42 mins       ██░░░░░░░░░░░░░░░░░░░░░░░   8.66% 
Markdown                 59 mins             ░░░░░░░░░░░░░░░░░░░░░░░░░   2.3% 
Other                    35 mins             ░░░░░░░░░░░░░░░░░░░░░░░░░   1.36%

🔥 Editors: 
VS Code                  42 hrs 46 mins      █████████████████████████   100.0%

color-calendar's Issues

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

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?

Please add more themes

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

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!

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

When I clicked on Demo1, it showed an error.

Getting data

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!

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.

Disable days

Hi, how i can programmatically disable days in month?

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

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.

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?

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";

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

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.

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.

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.

Can you make usage guidelines for react?

An example can help! Thanks

Refactor code into separate manageable modules

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

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.

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.

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"
})

Calendar 1

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

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.

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.

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

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?

How can I add eventsData from a external json file?

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

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?

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!