[Entry] Appointment Scheduler

#pushercontest #laravel #pusher #vue

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!

Top comments (8)

Cristian N • May 30 '18 • Edited

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

Doug Black • May 30 '18

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

Aliseivani • Mar 14 '19

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!