When opening the month view, on first view all date numbers are greyed out. Switching months up or down, then returning to the original month correctly highlights the date numbers for the current month.

Can't use this from NextJS due to the way CSS files are handled.

./node_modules/calend/components/buttonIcon/ButtonIcon.scss
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/calend/components/buttonIcon/ButtonIcon.js

https://nextjs.org/docs/messages/css-npm

Additional context for NextJS: vercel/next.js#27953

This is kinda niche, so I understand if this isn't a priority.

Describe the bug
I installed kalend, but when I run the app it gives me an error 'Invalid 'main' field in '...project\node_modules\kalend-layout\package.json' of 'dist/main.js'. Please either fix that or report it to the module author'

To Reproduce
Steps to reproduce the behavior:

1. Create a Next js project
2. Install Kalend
3. add the component in the index.ts or index,js, run the app.
4. See error

Expected behavior
I am using next js with typescript template. I think that it should have worked out of the box without any trouble shooting.

Screenshots

**Desktop **

• OS: windows 11
• Browser: Brave
• Version: 1.35.100

Edit
Its not the error of this package but one of the helper packages kalend-layout.

I transform my data to this form and transfer it to kalend, but it does not render anything
{ "07-01-2022": [ { "id": 2, "startAt": "2022-01-07T11:44:18.051Z", "endAt": "2022-01-31T11:44:21.051Z", "summary": "День Рождения компании", "color": "blue", "calendarID": "work" }, { "id": 7, "startAt": "2022-01-07T13:31:57.313Z", "endAt": "2022-01-08T14:32:01.313Z", "summary": "test 5", "color": "blue", "calendarID": "work" }, { "id": 5, "startAt": "2022-01-07T15:31:24.882Z", "endAt": "2022-01-07T17:00:00.030Z", "summary": "test 3", "color": "blue", "calendarID": "work" }, { "id": 6, "startAt": "2022-01-07T18:34:39.830Z", "endAt": "2022-01-07T20:02:00.212Z", "summary": "test 4", "color": "blue", "calendarID": "work" }, { "id": 8, "startAt": "2022-01-07T15:32:13.579Z", "endAt": "2022-01-07T16:00:00.832Z", "summary": "test 6", "color": "blue", "calendarID": "work" } ], "08-01-2022": [ { "id": 3, "startAt": "2022-01-08T17:55:52.159Z", "endAt": "2022-01-09T17:55:55.159Z", "summary": "test 1", "color": "blue", "calendarID": "work" } ], "06-01-2022": [ { "id": 4, "startAt": "2022-01-06T17:59:07.203Z", "endAt": "2022-01-06T19:00:00.462Z", "summary": "test 2", "color": "blue", "calendarID": "work" } ] }

One of the issues that I am facing is when trying to render Kalend in an accordion that is not active, it doesnt render since the height or flex basis is 0. I would like Kalend to grow or stretch when the accordian is set to active

Describe the bug
A onNewEventClick callback is for event creation, however startAt and endAt states seem would just stuck if a new event creation is interrupted/dropped. Seems these states only get cleared at a successful event creation. For example, if onNewEventClick triggers a modal with a defined form, if the user evade the submission or just decided to drop it, they won't be able to get updated startAt or endAt at new clicks in the calendar.
This applies to "drag defining time range" also.

To Reproduce
Steps to reproduce the behavior:

1. Click on an arbitrary time slot on the calendar view and trigger opens the event creation dialogue (handles by library user on their own)
2. if you fill in all needed info and do a submit successfully, you will be able to click and trigger another new event creation at other preferred time slot.
3. if you don't finish the form/dialogue for submission but drop in the middle, you won't be able to trigger the dialogue with another choice of time, startTime and endTime will always show the previous unfinished ones respectively.
4. This applies to "drag defining time range" also. A shadow "New Event" will always show and stuck on the calendar view.

Expected behavior
Perhaps there can be a callback function to tell kalend to clear its current registered states? In that case developer can always trigger such "state clear" function when user evade / drop the submission.

Screenshots

Desktop (please complete the following information):

• OS: macOS 12.3.1
• Browser Chrome
• Version 101.0.4951.41 (Official Build) (arm64)

Additional context

Describe the bug
Resizing the browser window while Kalend is visible throws an error.
TypeError: Cannot read properties of undefined (reading 'length')
Refreshing the page restores it to working order, until you resize the window again.

Expected behavior
The window should resize without causing Kalend to crash.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome

When I change the view from week to month or any other view the calendar gets updated to today, but the name of the month and year show old data. You can see it in the pictures.

The calendar show the event block at incorrect time slots for some events. It show the events blocks at correct position for other events.
in the live demo, the props shows correct start and end time. the event card also shows the start and end time correct.

but shows the event block at incorrect rows [i.e starting from around 9:30 to 11:30 when it should start from 13th row and end on 15.5th row ]

It looks like back to back meetings are detected as overlapping unless there is at least 45 min between them.

Is your feature request related to a problem? Please describe.
I am having a use-case where I have a recurring timetable that I want to render in the calendar. I understand one way to achieve this is parse the events and duplicate them for each week for the whole month. But thats a little intensive as I will have to duplicate it for lets say the whole year.

Describe the solution you'd like
Just curious if you have thought about supporting a feature that takes in the "day" of the week and we display it on all occurrence of that day. Example: lets say I have an event marked with "Monday", so it shows up on all mondays without having to duplicate it in events array.

Describe alternatives you've considered
I have thought about processing the events array and creating duplicate entries for each week of the day but that works if the recurring event is only for a week or two, If lets say there is a timetable which runs for 6 months, I will have to now clone a single event into 24 events in the array. This can get out of hand if each day I have 5 events and they re-occur every week for 6 months.

I want to present this as a question, I am happy to accept a No for an answer.

Thanks for building this library.

Trying to bring this into a nodeJS 16 project results in node-sass failing to build during install.

Node-sass supports nodeJS 16 starting with v6.0.0.

• Add localization for basic languages
• Allow extending of existing localization

Describe the bug
When user is clicking on a time slot, instead of being recognized as "point" clicking, sometime it will be onMouseUp (same as "drag define time range") which affects the event creation dialogue submission. (somehow this feels like it's too "sensitive" to be recognized as a "range selection")

To Reproduce
Steps to reproduce the behavior:

1. Go to weekly calendar view
2. Click on any preferred point for time picking
3. if you click very light and rapid (e.g., tap on the trackpad), the event will be recognized as onClick
4. if you click relatively moderate and/or sloppy (e.g., click hard through 2nd haptic feedback on mac trackpad), the event will be recognized as onMouseUp.
5. Once it's being recognized as onMouseUp, any evasion / interruption on the event creation procedure will stuck the user with some "left-hanging" states (e.g., startAt, endAt), see issue #163 for further details. (additionally, probably due to the "selected time range" is too small, startAt and endAt freaks out and always show as undefined)

Expected behavior
Could there be some way to "tune down" the sensitivity between onClick and onMouseUp? (maybe a very tiny ms delay can be the threshold?)

Screenshots

Desktop (please complete the following information):

• OS: macOS 12.3.1
• Browser Chrome
• Version 101.0.4951.41 (Official Build) (arm64)

Additional context

Based on event color and light/dark theme, Kalend should be able to adjust text color and maybe apply filters to optimize contrast.

General solution does not provide best experience.

Describe the bug
After updating the event styles from version 0.11.0 to version 0.13.0, the calendar auto-scrolls, which creates problems for using it for embedding in a page.

To Reproduce
Steps to reproduce the behavior:

1. Add a calendar along with other elements to the page
2. After rendering the calendar, an auto-scroll to the event elements will occur

Expected behavior
Prior to version 0.12.0, auto-scroll did not appear

Desktop:

• OS: Windows 11
• Browser: Сhrome
• Version: 100

Smartphone:

• Device: Phone13, Google Pixel 6
• OS: IOS, android
• Browser safari, chrome

Hi all,

I would like to open a discussion, what do you consider as minimum requirements for Kalend to be production ready.

For version 1 I want to include only essential features and then focus more on cleaning, polishing and improving performance before implementing anything extra or solving some edge cases.

I am biased, as I am both the maintainer and customer, so I would like to hear your opinion what are you missing or what is blocking you from using Kalend. Feel free to share how you want to use component.

I established this list for feature wanted in v1:

• configuration for setting different week start day,
• configuration for setting time in 24h format or am/pm,
• filtering events based on calendar id,
• dragging events in month view,
• little style customization(f.e. primary colors),
• option to show current time as line on week day table

Some ideas for v2:

• dark theme,
• different event types (tasks),
• setting custom x-days view instead of default 3-days view,
• more theming,
• maybe some outside plugin components like mini-calendar controls, new event modal

When clicking "Today" button on Day and "3 Days" views, wrong days are displayed.

I'm trying to import a custom local json including translations in greek language this way:

import gr from 'gr.json'

<Kalend
...
customLanguage={gr}
/>

my json is formatted as the existed jsons for the supported languages but in greek like this:

{
  "buttons": {
    "today": "Σήμερα",
    "agenda": "Ατζέντα",
    "day": "Ημέρα",
    "threeDays": "3ήμερο",
    "week": "Εβδομάδα",
    "month": "Μήνας",
    "showMore": "Περισσότερα"
  },
  "months": {
    "january": "Ιανουάριος",
    "february": "Φεβρουάριος",
    "march": "Μάρτιος",
    "april": "Απρίλιος",
    "may": "Μάιος",
    "june": "Ιούνιος",
    "july": "Ιούλιος",
    "august": "Αύγυοστος",
    "september": "Σεπτέμβριος",
    "october": "Οκτώβριος",
    "november": "Νοέμβριος",
    "december": "Δεκέμβριος"
  },
  "weekDays": {
    "Mon": "Δευ",
    "Tue": "Τρί",
    "Wed": "Τετ",
    "Thu": "Πέμ",
    "Fri": "Παρ",
    "Sat": "Σάβ",
    "Sun": "Κυρ"
  }
}

However Kalend is still displayed in English and nothing changes. When tried to change to one of the already supported languages like 'es' it works properly as expected. Am i missing something?

Thanks in advance

Hi,

I'm using kalend with next.js and for that I had to use the dynamic function to not render server-side.

I'm trying to display events from a fixed state and yet I don't know what I might be doing wrong as they aren't being displayed.

Any suggestions?

const KalendWithNoSSR = dynamic(
  () => import('@/src/components/pages/kalend'),
  { ssr: false }
)

No error is shown.
Thank you.

Describe the solution you'd like
Hey, thank you very much for the great work. Would be nice to have week numbers on the side as google calendar has on the monthly view.

Would you consider adding it to your component?

Hi everybody,

First of all , this lib is very nice.

Bug description

I have an issue about changing the hourHeight, when doing this dynamically, we are not seeing the good result on the screen. We need to change the width of the component to see events resizing happening.

You can easily reproduce this comportment when resizing your window.

Expected behavior

I want to let the user change the hourHeight by himself with a hook linked to the property and dynamically see the result

The included CSS has some very generic styles that end up overriding the styles within the rest of my application. For example:

p {
  padding: 0;
  margin: 0; }

html {
  font-size: 10px;
  font-family: MONOSPACE, SansSerif, sans-serif, serif; }

button {
  padding: inherit;
  margin: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  appearance: auto;
  letter-spacing: inherit;
  word-spacing: inherit;
  line-height: inherit;
  text-transform: none;
  text-indent: inherit;
  text-shadow: none;
  display: flex;
  text-align: inherit;
  align-items: inherit;
  box-sizing: inherit;
  background-color: transparent;
  border-width: inherit;
  border-style: inherit;
  border-color: inherit;
  border-image: inherit; }

Loading the Calend styles overrides the ones I am applying via Tailwinds, which dramatically alters my app in ways I don't really care for.

More specific named styles would stop this behavior (or using something like styled-components, which you hinted at already). AFAIK, the three above styles are the only element styles.

Everything seems broken when upgraded to in V0.0.3 [also in V0.0.2]
Using in app created with CRA.

Discussed in https://github.com/nibdo/kalend/discussions/48

Hello all, I have written about decision behind project name change in discussions section, just linking it here for anybody interested -> https://github.com/nibdo/kalend/discussions/48

Thank you

Describe the bug
The initialDate parameter has no effect

To Reproduce
Steps to reproduce the behavior:

1. Set initialDate to a value other than the current day, for example 2021-12-26T06:00:00Z
2. When rendering, today's date is displayed in the calendar

Expected behavior
The calendar is rendered on the number specified in the initialDate parameter

Desktop:

• OS: macOS 12.3
• Browser: Chrome 100.0.4896.75
• Kalend Version: 0.11.2

Hi!
Quick question:
Events within a day aren't visible. There seems to be something wrong with the set height (it is 0).
What am I missing here to get the calendar to work?

Thank you in advance for your help. :)

Is your feature request related to a problem? Please describe.
For some use cases, it may not make that much sense to one to see those blank hours outside their application interest. (e.g., 18:00 - 7:00).

Describe the solution you'd like
As a regular user of the library, I'd like to have a props to define working hours range at my choice, so that the viewport always focus to show defined hour range at higher priority (probably still need to let end users to scroll to view those less-interest time ranges).

Describe alternatives you've considered
Perhaps a props allow developer to choose the time range isn't always necessary. If a "focus time point" can be defined by developer would still be awesome. For instance, if I can choose 12:00 at noon as the "focus time point", then it's up to the browser's view height to determine how big of a time range can be displayed (ex. maybe bigger screen / high resolution can show +/- 8h where smaller screen can still show +/- 4h.).

Additional context
It be a bonus if elsewhere than the "preferred time range" can be shaded.

Describe the bug
disabledViews doesn't seem working for example_app, neither would it work on my own app.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'example_app' directory under the repo
2. npm i
3. npm start
4. pass a couple CalendarView choices to the disabledViews array, for this case CalendarView.DAY and CalendarView.MONTH:

disabledViews={[CalendarView.DAY, CalendarView.MONTH]}

Expected behavior
calendar view choices will filter out those disabled ones, for this case I shouldn't be able to see 'Day' or 'Month' anymore.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: macOS: 12.3, Chrome: 99.0.4844.74

Smartphone (please complete the following information):

• N/A

Additional context

• N/A

Describe the bug
When the project was built/scaffolded with Vite, npm run dev will throw error about dependency kalend-layout entry

To Reproduce
Steps to reproduce the behavior:

1. install kalend with npm i kalend
2. run dev env. locally with npm run dev
3. See error

Interim workaround
delete the main entry line ( "main": "dist/main.js",) under dependency kalend-layout's package.json (node_modules/kalend-layout/package.json) [UPDATE]: delete the entry does run npm run dev successfully, but kalend-layout won't be loaded thus not shown on actual project.

Expected behavior
Vite support with correct entry configured at build

Full Error Message

  npm run dev
  [email protected] dev
  
  vite
  Pre-bundling dependencies:
  react
  react-dom
  @mui/material/useMediaQuery
  @mui/material/styles
  @mui/material/CssBaseline
  (...and 30 more)
  (this will be run only when your dependencies or config have changed)
  ✘ [ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "kalend-layout". The package may have incorrect 
  main/module/exports specified in its package.json: Failed to resolve entry for package "kalend-layout". The package may have 
  incorrect main/module/exports specified in its package.json.
  
  node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29511:10:
  29511 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
        ╵           ^
  
  at packageEntryFailure (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29511:11)
  at resolvePackageEntry (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29507:9)
  at tryNodeResolve (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29323:20)
  at Context.resolveId (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29140:28)
  at Object.resolveId (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:38242:55)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async /Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:70928:27
  at async /Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:55556:34
  at async callback (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:919:28)
  at async handleRequest (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:699:30)
  
  This error came from the "onResolve" callback registered here:
  
  node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:55535:18:
  55535 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind }) => {
        ╵                   ~~~~~~~~~
  
  at setup (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:55535:19)
  at handlePlugins (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:841:23)
  at Object.buildOrServe (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1135:7)
  at /Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:2059:17
  at new Promise (<anonymous>)
  at Object.build (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:2058:14)
  at Object.build (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1912:51)
  at optimizeDeps (/Users/william/opt/gitlocal/kalend-test/node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:55790:34)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  
  The plugin "vite:dep-pre-bundle" was triggered by this import
  
  node_modules/kalend/dist/main.js:5:34:
  5 │ var $cw6c3$kalendlayout = require("kalend-layout");
    ╵                                   ~~~~~~~~~~~~~~~
  
  error when starting dev server:
  Error: Build failed with 1 error:
  node_modules/vite/dist/node/chunks/dep-c9c9d3e5.js:29511:10: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry 
  for package "kalend-layout". The package may have incorrect main/module/exports specified in its package.json: Failed to 
  resolve entry for package "kalend-layout". The package may have incorrect main/module/exports specified in its package.json.
  at failureErrorWithLog (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1601:15)
  at /Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1247:28
  at runOnEndCallbacks (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1032:63)
  at buildResponseToResult (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1245:7)
  at /Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:1354:14
  at /Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:664:9
  at handleIncomingPacket (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:761:9)
  at Socket.readFromStdout (/Users/william/opt/gitlocal/kalend-test/node_modules/esbuild/lib/main.js:631:7)
  at Socket.emit (node:events:390:28)
  at addChunk (node:internal/streams/readable:315:12)

Desktop (please complete the following information):

• OS: macOS 12.1
• Browser: Chrome version 98.0.4758.80 (Official Build) (arm64)
• Version
  • vite: v2.8.0

Additional context
N/A

Would you be interested in adding Storybook to this to aid with UX development? I've found it tremendously helpful for frontend work in multiple projects.

I'd be willing to take on the implementation, I figured I ask if it's something you're interested in before putting forth the effort.

Great job so far 👍

Hello,

I would like to share few (good) news for everyone.

1. Performance

Speed: I have made some optimizations and improvement for speed, so layout calculations are much faster. The most noticeable difference will be in month view.
Calculations on server: I will extract some calculation logic for those who would like to use server to precalculate positions for app.
Worker: I tested web worker to free rendering during calculations. It works great, but I still need to find way how to build worker from those functions dynamically. Basically it needs to merge all functions and imports to one file.

Either of this should improve performance if you need to load many events.
As changes are quite big and there are still some bugs, I will release it later after some internal testing.

2. Interface

I was thinking about improving interface by integrating Chakra Ui to replace custom components. What do you think about it?
https://chakra-ui.com/docs/getting-started

There are 2 problems:

1. Each day shows only 1 event. If I have 2 events I can't see the second one.
2. When click on event a modal pops up. The height of button is low as I can't see the text properly.

Hello.
Please, help me.

Kalend is not showing properly.

I use bootstrap and react in my application.
Can this be a possible cause of some hypothetical clash between the .css files and the styles for Kalend?

I appreciate your help very much.

Kalend here is used as it is without any fancy stuff added to it. (not even an event)

Hi, I am trying to implement this calendar in my project. It looks nice and I like the features but I'm having some troubles which I can't find out why. The calendar "table"(or timetable) doesn't show at all but I can see on the web developer tools that it is there. I attached the picture how calendar is shown on my page. Could you please help with advice, maybe there is an obvious mistake that I cannot see? This is the part of the code for calendar:

const eventss = [
{
id: 1,
startAt: '2021-12-21T18:00:00.000Z',
endAt: '2021-12-21T19:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test',
color: 'blue',
// calendarID: 'work'
},
{
id: 2,
startAt: '2021-12-21T15:00:00.000Z',
endAt: '2021-12-21T16:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test1',
color: 'blue'
},
{
id: 3,
startAt: '2022-01-25T14:00:00.000Z',
endAt: '2022-01-25T15:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test2',
color: 'blue',
},
{
id: 4,
startAt: '2021-12-21T11:00:00.000Z',
endAt: '2021-12-21T13:00:00.000Z',
timezoneStartAt: 'Europe/Berlin', // optional
summary: 'test3',
color: 'blue'
}
]

return (
<Kalend
// onEventClick={onEventClickData}
// onNewEventClick={onNewEventClick}
events={eventss}
initialDate={new Date().toISOString()}
hourHeight={60}
initialView={CalendarView.WEEK}
disabledViews={[CalendarView.DAY]}
// onSelectView={onSelectView}
// selectedView={selectedView}
// onPageChange={onPageChange}
timeFormat={'24'}
weekDayStart={'Monday'}
// calendarIDsHidden={['work']}
language={'en'} />
);

Hello,

I'm currently using the Kalend component in my react application that also uses react-i18next for localization. The issue is that before the Kalend component is rendered, the translations work fine e.g.

However when the Kalend component is rendered on screen for the first time, the translations stop working and are displayed as their keys instead e.g.

Here is my Kalend component set-up:

<Kalend
    events={marginScoreEvents}
    initialDate={`${marginScores[0].day}T20:00:00.000Z`}
    hourHeight={60}
    initialView={CalendarView.MONTH}
    disabledViews={[CalendarView.DAY, CalendarView.WEEK, CalendarView.YEAR, CalendarView.AGENDA]}
    timeFormat={'24'}
    weekDayStart={'Monday'}
/>

Any help is much appreciated! Let me know if you need more information, thank you!

Update

I think what's happening is that the i18n instance in the Kalend component is overriding my instance of i18n thus my namespaces aren't being recognized. Not sure how to fix but will post a solution if I find one.

In a small viewport, if you disable all views except for one, the drop-down ellipse is still visible even though there are no items to select. This doesn't affect larger responsive formats.