Tennis court booking project

Scheduler Javascript
#1

Hello, I’m trying to do a tennis court booking project with the scheduler and i need some hints…

My goal is to have the day view separeted by units (courts) and have an option to cancel and to mark the events as finished, payed or not payed (and change their colors).
In the Description of the events y have to store the name of the player who makes the reserve
Also i need to save extra data on the db such as Court number, player name, and if the court was or not payed.

I’ve Got the scheduler working and saving the events data on MySQL like the sample file, but I can’t add more than 4 units in the day view, if i put 5 the scheduler will not load correctly.

Can you give me some hints or examples of how to achive all this ?

Thanks in advance!

#2

Hello,

What you have described can be quite easily achieved.
Check out:

  1. Units view extension (scheduler_package\samples\03_extensions\02_units_view.html). That, I believe, would be the main view for you scheduler.
  2. Custom styling instructions and scheduler_package\samples\02_customization\01_events_coloring.html sample.
  3. How to create custom details form in order to add additional fields.

I am sorry, how are you adding units in the day view?

Best regards,
Ilya

#3

Thanks a lot Ilya!
Now i have a working scheduler separated by units, but i don’t really understand how to implement the different events types.
My goal is to get three types of events (finished, unfinished, canceled) with different colors for each one, and save them in the DB. can you give me some hints to do this ?

#4

My goal is to get three types of events
Add custom field of select type

docs.dhtmlx.com/doku.php?id=dhtm … of_editors

after that , you can add custom coloring logic through templates

docs.dhtmlx.com/doku.php?id=dhtm … appearance
samples\02_customization\01_events_coloring.html

#5

Thanx i have it working now.
I have Two last questions…

i have my lightbox defined like this

scheduler.config.lightbox.sections=[ { name:"description", height:200, map_to:"text", type:"my_editor" , focus:true}, {name:"someA", height:20, map_to:"op", focus:true, type:"select", options:[ {key:"1", label:"One"}, {key:"2", label:"Two"}, {key:"3", label:"Three"} ] }, { name:"time", height:72, type:"time", map_to:"auto"} ]

  • How can i change the event color depending wich option is selected ?
  • and how can I set the event creation and dragging only betwwen predefined time ?, for example, I want that the events can only move and cretate between 30 minutes intervals, not the 5 minutes that are set by default

Thanx in advance

#6

and how can I set the event creation and dragging only betwwen predefined time
scheduler.config.time_step = 30;

How can i change the event color depending wich option is selected

in js code

scheduler.templates.event_class = function(start, end, event){ return "option_"+event.op; }

in css

.dhx_cal_event.option_1 div{ color:purple !important; } /*multi-day event in month view*/ .dhx_cal_event_line.option_1 { background-color:purple !important; } .dhx_cal_event_clear.option_1 { color:purple !important; } ... similar for other options ...