schedule-x/schedule-x

Material design event calendar and date picker

Material design calendar and date picker

This library offers a material design calendar and date picker for the web. They can be used regardless of your framework preferences, since they are built around a lightweight virtual-DOM implementation. The library also offers adapter components for React and Vue.

Website for documentation and demo: https://schedule-x.dev/

Contact

For bug reports and feature requests, please use the issue tracker of this repository.

For any other questions or comments, feel free to join the chat on Discord: https://discord.gg/yHbT3C4M8w

License

MIT

Copyright (c) 2023, Tom Österlund

Code contributions & project insights

Code contributions are welcome, but require communication. Please read CONTRIBUTING.md and open an issue before opening a PR.

For insight into what's currently in progress, and what's coming up, refer to the project board. The "backlog" column is sorted by priority, so the topmost tasks are the ones that are most likely to be worked on next.

schedule-x's Issues

[feature]: Highlight current time in day/week view

Is your feature request related to a problem? Please describe.
Every modern calendar app brings to focus the current time on page load and also highlights the current time by a dotted/dashed line. It would be a great thing to include in this library too. It would remove any unnecessary confusions and reduce the time to look over important events (of course we shouldn't be looking at past events more often than future :) )

Describe the solution you'd like
Something how Google Calendar also shows up current time by a horizontal line.

Thanks!

[FEATURE REQUEST] Online Appointment Scheduling

Hi there,
Thank you for your product.

Describe the solution you'd like
A similar solution to calendly.

Unhandled Runtime Error with Next.js Project

Thank you for wanting to take the time to report a problem. In order to increase the chances of the issue being
resolved,
please take a moment to give as much relevant information as possible.

Context:

Versions:

    "@preact/signals": "^1.2.2",
    "@schedule-x/calendar": "^1.2.0",
    "@schedule-x/react": "^1.1.1",
    "@schedule-x/theme-default": "^1.0.0",
    "axios": "^1.6.2",
    "next": "14.0.4",
    "preact": "^10.19.3",
    "react": "^18",
    "react-dom": "^18",

Describe the bug

Following the sample React code with a basic client Next.js page, I run into the following stack trace:

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading '__k')

Call Stack
q
node_modules\preact\dist\preact.module.js (1:8903)
CalendarApp.render
node_modules\@schedule-x\calendar\dist\core.js (1035:15)
eval
node_modules\@schedule-x\react\dist\index.js (30:0)
commitHookEffectListMount
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (20998:0)
commitHookPassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23051:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23156:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23267:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)
recursivelyTraversePassiveMountEffects
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23134:0)
commitPassiveMountOnFiber
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23153:0)

To Reproduce

Steps to reproduce the behavior:

1. Set up a new Next JS project (latest version)
2. Install all Schedule-X dependencies as documented
3. Paste the sample code into a new client side page

Expected behavior

A calendar will appear with the sample data

Screenshots

feature: support Japanese language 'ja-JP'

Is your feature request related to a problem? Please describe.
It does not support the Japanese locale.

Describe the solution you'd like
I would like to add Japanese translation support.

Additional context
This is a fantastic project, and I eagerly hope that it will also extend to the Japanese community. Thank you.

feature: set in event "Title" - "date start - date end" If "Title" is empty (in view Month)

Is your feature request related to a problem? Please describe.
Right now if event "Title" is empty it will look like this:

Describe the solution you'd like
Set in event "Title" - "date start - date end" If Title is empty (in view Month)
Like in the picture bellow:

Additional context
If I will use custom event "Title" (date start - date end) in "Week" or "Day" view it will look like in picture bellow, Time duplicated:

feature: support Russian language 'ru-RU'

Is your feature request related to a problem? Please describe.
Currently Schedule-X doesn't support Russian language.

Describe the solution you'd like
I want to add Russian translation into Schedule-X (packages/translations/src/locales/ru-RU)

Additional context
I have cloned project and use another language locale for a example. It's clear.

Update date field when clicking a day in month view

** The bug**

Updating the date entry in top right when clicking a day in month view. This will allow viewing that day directly when switching to day view.

To Reproduce

Steps to reproduce the behavior:

1. Go to month view
2. Click on a day
3. Select day view from views menu
4. It goes to the day that was already typed in day view, not the currently selected day in month view.

Expected behavior

Should go to a selected day in month view when selecting day view.

TouchScreen Support for drag-drop plugin

Is your feature request related to a problem? Please describe.
Currently, the drag & drop functionality is an excellent feature that enhances user interaction. However, I've noticed that this feature is not compatible with touchscreen displays, which limits its utility in mobile or touch-enabled environments.

Describe the solution you'd like
We should handle touch events like mouse events, and maybe this can help:

touchstart is equivalent to mousedown
touchend is equivalent to mouseup
touchmove is equivalent to mousemove

feature: add and edit events

I have already used it. Currently, it is used for display, but there is no new function. If it is supported, it would be great, such as right clicking on the interface to create or edit an existing schedule

[FER] standalone date picker component

Is your feature request related to a problem? Please describe.
Not particularly.

Describe the solution you'd like
as in https://tomosterlund.github.io/qalendar/guide.html#date-picker, would this date picker (sorry for the misunderstanding, but I mean @schedule-x/date-picker) be able to be used as a standalone component ?

feature: support Korean language 'ko-KR'

Is your feature request related to a problem? Please describe.
Currently Schedule-X doesn't support Korean language.

Describe the solution you'd like
I want to add Korean translation into Schedule-X (packages/translations/src/locales/ko-KR)

Additional context
I have cloned great project and use another language locale for a example.

[bug] Current Date not highlighted in Month View

Context:

• Browser [e.g. chrome, safari] Google Chrome (distro: Windows 11)
• Browser-version 120.0.6099.225 (Official Build) (64-bit) (cohort: Stable)
• Schedule-X version [e.g. v1.1.0] Please make sure that you've tried the latest version before reporting the bug.

    "@schedule-x/calendar": "^1.9.0",
    "@schedule-x/event-modal": "^1.9.0",
    "@schedule-x/react": "^1.6.1",
    "@schedule-x/theme-default": "^1.9.0",

• NextJS 14.0.3

Describe the bug

The current date isn't highlighted when viewed in month view.

To Reproduce

Steps to reproduce the behavior:

1. Embed the component in a NextJS (client rendered) component
2. Select Month View
3. Notice that the current date is not highlighted.

Sample code is as below:

const calendar = useNextCalendarApp({
    defaultView: viewMonthGrid.name,
    views: [viewDay, viewWeek, viewMonthGrid],
    plugins: [createEventModalPlugin()],
    events: [],
    isDark: true,
  });

// ... some more code unrelated ... 

// the actual rendered Tsx
<div className="flex flex-col w-full rounded-lg shadow-md border border-slate-800 relative">
  <ScheduleXCalendar calendarApp={calendar} />
</div>

Expected behavior

The current date should be highlighted on the calendar (in month view).

Screenshots

PS. Thanks for the amazing library!

An event display out of range bug

hi, all

Environment

• Browser: chrome
• Browser-sersion: 120.0.6099.129 (Official Build) (x86_64)
• Schedule-X version:
  {
  "@schedule-x/calendar": "^1.4.0",
  "@schedule-x/date-picker": "^1.4.1",
  "@schedule-x/drag-and-drop": "^1.4.1",
  "@schedule-x/event-modal": "^1.4.1",
  "@schedule-x/react": "^1.3.0",
  "@schedule-x/scroll-controller": "^1.4.1",
  "@schedule-x/theme-default": "^1.4.1",
  }

Describe the bug

when I create a event with time or only date, like this

          {
                id: uuidv4(),
                title: 'Event 3',
                start: '2024-01-10 08:00',
                end: '2024-01-10 09:00',
                calendarId: 'work'
            }

I wish I could see it in the calendar like google calendar

but it shows like this :

and

feature: support SSR in Nuxt

Context:

• Browser [e.g. chrome, safari]: Chrome
• Browser-version: 120.0.6099.199 (Official Build) (arm64)
• Schedule-X version:
  "@schedule-x/calendar": "^1.4.1",
  "@schedule-x/theme-default": "^1.4.1",
  "@schedule-x/vue": "^1.4.1",

Describe the bug

When attempting to use the Vue example in Nuxt, I get the following error on a full page load:

at q (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/@schedule-x_calendar.js?v=9e4b5f2f:272:89)
at CalendarApp.render (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/@schedule-x_calendar.js?v=9e4b5f2f:1950:5)
at Proxy.mounted (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/@schedule-x_vue.js?v=9e4b5f2f:42:22)
at http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:4162:88
at callWithErrorHandling (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:1568:18)
at callWithAsyncErrorHandling (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:1576:17)
at hook.__weh.hook.__weh (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:4142:19)
at flushPostFlushCbs (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:1742:41)
at flushJobs (http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/chunk-NE34BHUI.js?v=9e4b5f2f:1780:5)

To Reproduce

Steps to reproduce the behavior:

1. Setup basic Nuxt project
2. Copy example directly into vue file in Nuxt
3. Attempt to load page from cold (not a hot reload)

I will note that hot-reloads work fine. which makes me think that Schedule-X is not waiting for the createCalendar object to finish before attempting to render.

Expected behavior

Calendar renders without issue.

Screenshots

If applicable, add screenshots to help explain your problem.