Very cool! Having written a couple of web calendars myself, I found that most of the hair-tearing logical complexity was due to recurring events. I didn't see any reference to recurrence when I skimmed the docs or the demo.
Have you decided how (or if) you're going to handle recurring events? Because that has huge implications for how otherwise "simple" changes to events behave, both from whatever backend you use as well as the UI.
Woo I have a question! I have attempted something similar but my biggest issue was fixing the layout of overlapping events. Online solutions attempt to divide the column width by the number of overlapping events. But then another issue is the "tolerance" of overlapping events - Apple Calendar, for example, only begins overlapping events if they're > 5min of each other.
How were you able to overcome this challenge?
Have you seen the Hey Calendar that was demo'd yesterday? https://www.youtube.com/watch?v=SztU4232u_o
I know you're following Google Calendar but I think Hey has some great ideas here :)
Why do you have months on separate pages that scroll left to right, instead of a continuous vertical scrolling view?
It's so weird, I don't know why almost all calendars have this bonkers design. We don't paginate web documents anymore. Why calendars?
Google actually got this right at one point with their Android app (the open source one), but then they broke it again with the newer closed source app!
There is a similar but established library already: https://github.com/nhn/tui.calendar. Did you take a look at that one before starting your own? If yes, what were you missing?
Nice work, looks very clean.
Small suggestion for the date picker:
I appreciate that you can click on the month+year to navigate between years much more quickly than using the previous/next month arrows, but it's a bit non-obvious. There should be a hover effect when the cursor is over the month+year, e.g. a gray rounded rectangle, just like a gray circle appears when you're hovering over the arrows or a date. This would make it clearer that this is clickable.
I think this looks exactly like https://fullcalendar.io/demos
I have read many comments on this thread pointing towards other calendar libraries. I appreciate projects like this because I believe it's healthy for our industry to rethink "solved" issues. You put a cool spin on this topic and I hope that it taught you lots while building it.
Looks nice! I assumed the demo is editable, because I can drag events around, but there is no way to add new events?
I wonder, what would be cheapest way for backend to store calendar events and share between own devices? We are talking only about ten or so events per month, for one year ahead. Maybe connect to github repo and commit each change into some text or json file?
One feature I wish Google calendar had is "weekend" view; a condensed view of upcoming weekends, hiding weekdays. You can hide weekends, but in my personal account planning weekends is more important to me than planning weekdays.
I did something like this for a personal project that I use to track my time and it is a massive undertaking full of little gotchas. Kudos for getting this working so smoothly, this is really awesome!
What do people use to set an alarm that you absolutely do not want to miss?
Congrats! I tried before to build a calendar from scratch with no libraries at all and it was a real pain, especially figuring out how to make an event span through multiple days.
This is very nice, congrats!
I find calendars to be interesting projects for some reason. I built one for a personal project recently using Phoenix LiveView and have really enjoyed it a lot.
In this type of components, the worst is always the display of parallel events, i.e. events that have the same. I don't see such an example unfortunately.
Nice work! Animation on the event reveal is smooth and responsive.
Does it integrate into existing calendar to make it more seamless to leverage the web calendar?
For several years, I worked at a fairly large company as the CTO. All C-level executives (and some managers) had G-suite accounts, and all executive meetings or calls were to be on the shared calendar, allowing anyone to enter any call without prior request. Of course, as in all companies, people would leave the company (by personal choice or the company's decision) and new people would join. Often, people would forget and add random things to the calendar (like picking up a son from school, dentist appointments, etc.).
Our CFO left our company to work at a large investment fund. As usual, I would have removed her from our Gsuite, but the C-levels wanted to keep the email so we could still access her contacts and "impersonate" her in ongoing deals. She created a new password, sent it to us, and stopped using the account.
However, two years passed and some calendar events started to appear. They were from an unknown user but with the old CFO's email, involving random professional meetings with random people. We called her, and she said that she didn't have the account credentials or even the cellphone she previously used.
So we did what most companies do: We ignored it.
Fast forward a few months, our head of marketing was at a startup event with investors when a guy he didn't know introduced himself. He was from another company in the same market as ours and was concerned that he had started negotiating to buy an IP from us but we stopped responding. We had never sold any IP, so my coworker asked with whom he had been talking. Of course, it was with the impersonator. When we checked the email, there weren’t any recent emails sent or received. Weird.
A few days later, we called him to the office, offered him some coffee, and he showed us the conversation. It contained a lot of internal details, a full 9-page PDF with specifications and valuation, pricing, and payment details, with the payment destination being our company's account!
It didn't make any sense. It wasn’t just an error. It wasn’t just a scam. Why would the person direct the money to us?
We tried to investigate, but with many things on our plate, the mystery was again sidelined.
A few weeks later, we had a large sales event inland. By local legislation, all events of a certain size must have a paramedic present. We hired a recent college graduate for this role. She reported some sexual harassment from the construction workers we had hired to build the stage and event structure. As we were investigating this and talking with the authorities, we noticed some calendar events between the medic and the impersonator. Our CEO joined one of these meetings, with me beside him at his desk. Neither party turned on their camera. The impersonator's voice, calm and professional, stated that since our CEO had joined the meeting, he could leave the rest to him and then exited the meeting. We talked to the medic; the impersonator had offered her the equivalent of 20k dollars to not make any public claims about the harassment. We had never discussed any of this during our board meetings.
We started to panic. What else could the impersonator have done? How long had he been posing as us?
We contacted a security company to investigate. They deployed four agents who began to analyze data, track everyone, call people for interrogation, and so on.
In a couple of days, they identified a 23-year-old guy from accounting as the impersonator. We called him into a meeting with all directors. He was visibly nervous but explained his story. A few months before joining the company, he had bought a used cellphone online, on an eBay-like website. This cellphone had belonged to the former CFO, who hadn't wiped it before selling. He began reading the saved emails and documents and got excited about the company's strategy, then applied and got the job. He even shared this story with his recruiter (as in "look at God's will"), but nobody reported it to us, as it seemed irrelevant.
So, he occasionally received emails and acted on them, with the best intentions. He actually had the authority to send and receive money, since he worked in the accounting department. He said that initially, he would ask for advice on what to do, but never received any good suggestions, so he stopped asking. From the first CFO to him, we had two other CFOs. Apparently, during this time, we also had a shadow one. He solved many issues, from workers asking for money to renegotiating payment deadlines. He was actually very good at it.
He showed us all the emails and deals he made, and everything was, in fact, recorded in our system, with invoices sent and everything.
The directors debated whether what he had done was good, bad, illegal, and whether he should receive a reward
, etc.
We voted and then promoted him to a position akin to vice-CFO and gave him a substantial bonus, considering all the legal expenses he saved us.
I left the company a few months after that, but I heard he went on to work at a 'cool' startup, I think Notion or Spotify, something like that.
He was a very intelligent and humble guy, and we met him just because of a series of coincidences with a calendar app.
How do you create a new event, click or double click on the empty squares does nothing for me.
There's so much talent out there. It just blows my mind. Great job.
Awesome! Well done. What about resizing?
looks great!
could this someone be rendered as a component in a react app ?
the Kiko team would love this
I have a question about the design.
On the screenshot on the homepage https://schedule-x.dev/ the events are touching the left border of the box for the day, but there's a gap between the event and the right border of the box.
Google Calendar does that as well, and I found it quite ugly. I didn't know whether they did it deliberately (maybe I'm the only one who doesn't like it? or maybe there's some functionality associated with that that I haven't worked out?)
So I can't ask the developers of Google Calendar but I can ask you :) Is there a reason for laying out the calendar that way? Or is that just the convention now that Google Calendar does that?
I see you've obviously put thought into the design so I don't think it's an oversight on your part (although it may be on Google Calendar's part).