What I built
This scheduler allows you to create appointments to be scheduled in different rooms. You can create rooms, create appointments to be added directly to the scheduler, move appointments between rooms and time slots on the scheduler, schedule appointments without a time to be added later (drag and drop them on).
The scheduler uses sockets to communicate with others on the schedule, so that appointments time slots lock out when you are scheduling there, or when you are editing an appointment.
Demo Link
Project currently lives here: dev.to Scheduler: scheduler.dougblackjr.com
Note: This app is made for desktop viewing.
Link to Code
Repo: https://github.com/dougblackjr/devto-scheduler
How I built it (what's the stack? did I run into issues or discover something new along the way?)
STACK:
php7.2
Laravel
Vue.js
Redis
Pusher
fullcalendar
fullcalendar Scheduler
toastr
Digital Ocean for hosting
ISSUES:
There were two challenges.
The first was locking the time slots on the calendar, which have no backend model created for it. In order to show someone across the ocean that the time slot is being edited, and to avoid overlap, I used Redis to create a key that specifically targets that slot on that day for those times for that particular resource.
The second, and possibly more challenging, was dealing with time zones. When I had tried this in the past, I relied heavily on the browser to deal with time. But if someone was halfway around the world, the time slots would get all borky. Therefore, I throw pretty much everything at the server in order to deal with timing.
Additional Resources/Info
Here's my random dump of thoughts:
- Pusher made this a thousand times easier.
- Though I love my friends around the world, if y'all could move to Eastern Standard time, I would appreciate it.
- I created this because scheduling is hard. I'm grateful for the already created things that made this possible. Please steal my code and make it better.
- Thank you to dev.to for being a positive community and for making this all possible!
Oldest comments (8)
this is very similar to my idea...almost all components but better. Now I feel sad:(
Hey! Do your idea! Take this and improve on it if you like! Let me know how I can help
Wow ! Awesome application.
I'm working on an app right now and I kept thinking how I would implement this functionality :) Now I have a good point to start. Will try to see if I can make it work with socket.io, though. Also, why the light grey text on white bg (on the scheduler subdomain), it's killing me
So glad, I hope it helps!
I used the out-of-the-box UI in Laravel, didn't do too much front end. My eye for design is garbage! LOL
Awesome application
I've been looking for a fullcalendar scheduling solution for vue and this seems to be the perfect example. Unfortunately your demo does not work anymore but video demonstrates the process. Thank you for useful article. Keep up the good work!
Thanks for letting me know about it being down. I'll be taking a look at that, will let you know when it's up (probably in a few days)