Calendar Job Availability

Scheduler Javascript
#1

Hello,
I am interested in creating a Job Availability calendar application both for mobile devices and normal devices.

Here’s how I would like it to work, user can click a day, and it will pop up with a from-time to-time, after clicking OK, it will mark that day in green (for the specified time)

Also, the user should be able to click a calendar day and drag all the way across, for example if the user clicks monday and drags to friday, a pop up would pop up saying “(o) available or (o) unavailable”

if you clicked available, it would turn green

On top of all that, I would like a checkbox to manipulate a bunch of events at once, for example the user can check a box that says “I can work weekdays 9am to 5pm”, and it would immediately
put green every weekday from 9am to 5pm… and I need to integrate this with the server side database.

Does anyone know where I might start?
I started with the dhtmxScheduler: Month overview using highlighted timespans example
but i’m confused as to whether or not I should be using events or not?

#2

Will you have anything except of working time areas?

Marked timespans was created as additional marking levels to events, so both events and some marks can be used in the same time.

If you need only working areas - you can use only events ( render them in place of working areas ) Scheduler has built in functionality for adding|deleting|loading|saving events - so such kind of manipulation will be easy to implement.

Solution with marked timespans has its own benefits. But you will need to implement a lot of ui hooks for correct interaction logic.

#3

Ok then what I gather I need is to use events rather than marked timespans,
but lets be honest, for available or unavailable, it will look funny to have events as availability?
Is there a way to skin the events to look more like available/not available spans?

Where do I start?

#4

Yep, you can redefine style of existing event boxes.
docs.dhtmlx.com/doku.php?id=dhtm … appearance

Or just define a custom render for them
docs.dhtmlx.com/doku.php?id=dhtm … ts_display

#5

thank you very much, this is ingenious

#6

How do I remove the starting time in month view for 1-2-3 hr events the same day?

I have

scheduler.templates.event_bar_text = function(start,end,event){ var fmt = "h:MMtt"; return start.format(fmt).replace(/:00/,'') + ' - ' + end.format(fmt).replace(/:00/,'') + ' ' + event.type; }

however, that doesn’t fix an event that is all on the same day (for example an event starting at 6:00 on october 23 lasting 2 hours will say 06:00 6am - 8am
I want to get rid of the “06:00” altogether

Jim

#7

I found it, it is scheduler.templates.event_bar_date

This is what I used to clear it

 scheduler.templates.event_bar_date = function(start,end,event){
           return '';
}