nibdo / kalend Goto Github PK
View Code? Open in Web Editor NEWReact calendar component with support for multiple views and events
License: MIT License
React calendar component with support for multiple views and events
License: MIT License
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:
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.
**Desktop **
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:
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.
Desktop (please complete the following information):
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):
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 ]
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.
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:
onClick
onMouseUp
.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?)
Desktop (please complete the following information):
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:
Expected behavior
Prior to version 0.12.0, auto-scroll did not appear
Desktop:
Smartphone:
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:
Some ideas for v2:
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.
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.
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:
initialDate
to a value other than the current day, for example 2021-12-26T06:00:00Z
Expected behavior
The calendar is rendered on the number specified in the initialDate
parameter
Desktop:
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:
npm i
npm start
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.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
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:
npm i kalend
npm run dev
Interim workaround
delete the main entry line ( [UPDATE]: delete the entry does run "main": "dist/main.js",
) under dependency kalend-layout's package.json (node_modules/kalend-layout/package.json
)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):
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.
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.
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
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.