Assign Color to event or auto color based on event type.

Scheduler Javascript
#1

Hi, i’m using the Scheduler with mysql database to manage event and event type. How in lightbox popup when adding a new event could I assign a color to that event. Or maybe if I select lets say wedding as type, to be red automatically instead of the default color.
tks
seby

#2

Any help please?
tks
Seby

#3

I would like to know this too :smiley:

Thanks!

#4

You can

  • place the select in lightbox and map it mytype property
  • add css template as

scheduler.templates.event_class = function(s,e,ev){
if (ev.mytype == 1) return “wedding”;
if (ev.mytype == 2) return “birthday”;
return “”;
}

  • now you can add css classes on page for each type of date

/*event in day or week view*/ .dhx_cal_event.wedding div{ background-color:purple !important; color:white !important; } /*multi-day event in month view*/ .dhx_cal_event_line.wedding{ background-color:purple !important; color:white !important; }

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

#5

Hi stanislav, tks for quick answer. Here’s my code and i’m using mysql database with type Business and Personal in the type dropdown selection.
Is it the same code that you wrote to me?
Tks
Seby

<?php session_start(); include ('../../../codebase/connector/scheduler_connector.php'); include ('../../common/config.php'); $res=mysql_connect($server, $user, $pass); mysql_select_db($db_name); $scheduler = new schedulerConnector($res); /*$list = new OptionsConnector($res); $list->render_table("types","typeid","typeid(value),name(label)");*/ //-------------Sub Type dropdown .......................... $OtherDropdown = new OptionsConnector($res); $OtherDropdown->render_table("session_type","session_type","id(value),session_type(label)"); $scheduler->set_options("session_type",$OtherDropdown); //------------- Eof Sub Type dropdown .......................... $clients = new OptionsConnector($res); $clients->render_sql("select id as value, full_name as label from clients where user_id = '".$_SESSION['user_id']."'","","value,label"); $scheduler->set_options("clients",$clients); //$scheduler->enable_log("log.txt",true); function mycode($action){ $action->set_value("user_id", $_SESSION['user_id']); } $scheduler->event->attach("beforeProcessing", "mycode"); //$scheduler->enable_log("log.txt",true); //$scheduler = new schedulerConnector($res); //$scheduler->render_table("events","event_id","start_date,end_date,event_name,details,types,clients"); if ($scheduler->is_select_mode()){ // ' code for loading data $SQL = "SELECT * from sessions WHERE user_id='".$_SESSION['user_id']."' "; $scheduler->render_sql($SQL,"id","start_date,end_date,session_name,session_name,session_notes,session_type,session_location,type,client_id", "", ""); } else { // code for other operations - i.e. update/insert/delete $scheduler->render_table("sessions","id","start_date,end_date,session_name,session_notes,session_type,session_location,type,client_id,user_id"); } ?>
#6

Hi again, maybe i’m not in the right place also. so here’s my HTML file :
tks for your help Stanislav
Seby

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; }
 
 
 
#7

Hi agan Stanislav, this is what I tried down there, but it seems that I don’t have the right recipes.
tks for your help
seby

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } /*event in day or week view*/ .dhx_cal_event.Personal div{ background-color:purple !important; color:white !important; } /*multi-day event in month view*/ .dhx_cal_event_line.Personal{ background-color:purple !important; color:white !important; } /*event in day or week view*/ .dhx_cal_event.Business div{ background-color:red !important; color:white !important; } /*multi-day event in month view*/ .dhx_cal_event_line.Business{ background-color:red !important; color:white !important; }
 
 
 
#8

I’m still trying to find the solution on the forum, but still can’t fin the solution clearly.
tks for your help again
Seby

#9

Am I the only one searching for that question?
please
tks
Seby

#10

hi, still waiting for help.
tks
seby

#11

Hello,

Please you code quotes here or external code pastie services, difficult to read, a lot to scroll.

$scheduler->render_sql($SQL,"id","start_date,end_date,session_name,session_name,session_notes,session_type,session_location,type,client_id", "", "");

[code]scheduler.templates.event_class = function(s,e,ev){
if (ev.sections == 1) return “Personal”;
if (ev.sections == 2) return “Business”;
return “”;
…
var sections=[
{key:‘Business’, label:“Business”},
{key:‘Personal’, label:“Personal”}
];
…

scheduler.config.lightbox.sections=[
{name:“session”, height:20, map_to:“session_name”, type:“textarea” , focus:true},
{name:“type”, height:20, type:“select”, options:sections, map_to:“type” },
}[/code]
So what are you doing here? I am not sure I can follow but as far as I see your event doesn’t have ‘sections’ property you are checking in event_class template.
That property should be either selected from the database or at least saved on client side (or usually both).

Kind regards,
Ilya

#12

Hi everyone, any help would be appreciated…
tks
Seby

#13

Ok Ilya, what I want to do is to have color coded event in the calendar depending on the type i choose. See in the jpg I attached I have type field wich come from database as Business or personal. So What I need is to have different colors depending of what I choose. So in my month or year view, I can see those diffent colors. I have attached my file code so you can read better

tks
Seby
code.zip (2.9 KB)

cal1.jpg626×540 81.4 KB

#14

Hello,

You build your logic on ev.sections yet event doesn’t have ‘sections’ property… As I said it should be either selected from the database or at least saved on client side (or usually both).

Maybe

{name:"type", height:20, type:"select", options:sections, map_to:"type" },

here you wanted

map_to: "sections"

Kind regards,
Ilya