Change the skin of double Calendar

Suite and Optimus Suite 5
#1

material skin.png652×523 12.1 KB

Hi,

I came across this post about changing the skin of double calendar.
forum.dhtmlx.com/viewtopic.php? … endar+skin

The application(I did not develop) uses “dhx_skyblue” skin for the double calendar. The client needs all white calendar, something like “material” or “dhx_web”. When I change as follows:

startCalendar.leftCalendar.setSkin("material"); startCalendar.rightCalendar.setSkin("material");
Its totally out of format with some special characters all over.
Is the above the only step required to change the skin of a double calendar? What all changes do I need to do?
Please let me know.

Regards,
SNS

#2

You also need to attach the corresponded css file for the specified skin.
This file can be found in the “skins” directory of your dhtmlx package.

#3

Thank you Sematik. I did see the package. I could not spot any css file secific to “dhx_web” or “material” skins. Could you please advise me?

dhtmlx package.png332×894 15.3 KB

#4

You need to check the in the dhtmlxSuite/dhtmlxCalendar package. Not in the dhsmlxScheduler.

#5

Thank you so much Sematik.

#6

I could add the calendar successfully. I have a small issue here. Please help me out. I’m a middleware developer, not very familiar with css formatting. I tried to look into the dhtmlxcalendar.css, but not able to figure out how to do the changes.
When I add the calendar, as you can see, its moved a bit to the right, also the selected date is an oval which is truncated.

Could you please help me to position the calendar properly in the box, and also make the selected date to a circle, instead of oval? The same with the grey hover, that is also truncated.

This is a part of my form where calendar is defined:

{type: "block", width: 643, className:"start_end_cal_blc", list:[ {type: "fieldset", label: "Start Date", offsetTop: 5, inputWidth: 316, inputHeight:160, list:[ {type: "label", className: "start_cal", name: "start_cal"}, {type: "block", list:[ {type: "checkbox", label: "All Day", id: "start_all_day_ck", className: "start_all_day_ck", name: "start_all_day_ck", offsetTop: 30, position: "label-right", checked: true}, {type: "newcolumn"}, {type: "input", label: "Start Time", id: "start_all_day_ck_start_time", name: "start_all_day_ck_start_time", offsetLeft: 30, position: "label-top", value: "08:00 AM", inputWidth:60, disabled:true}, {type: "newcolumn"}, {type: "input", label: "End Time", id: "start_all_day_ck_end_time", name: "start_all_day_ck_end_time", offsetLeft: 30, position: "label-top", value: "05:00 PM", inputWidth:60, disabled:true} ]}, {type: "select", name: "start_all_day", label: "", inputWidth: 300, hidden:true, options:[ {value: "First Half", text: "First Half"}, {value: "Second Half", text: "Second Half"} ]} ]}, {type: "newcolumn"}, {type: "fieldset", label: "End Date", className:"start_cal_fs", offsetLeft: 3, offsetTop: 5, inputWidth: 316, inputHeight:160, list:[ {type: "label", className: "end_cal", name: "end_cal"}, {type: "block", list:[ {type: "checkbox", label: "All Day", className: "end_all_day_ck", name: "end_all_day_ck", offsetTop: 30, position: "label-right", checked: true}, {type: "newcolumn"}, {type: "input", label: "Start Time", name: "end_all_day_ck_start_time", offsetLeft: 30, position: "label-top", value: "08:00 AM", inputWidth:60, disabled:true}, {type: "newcolumn"}, {type: "input", label: "End Time", name: "end_all_day_ck_end_time", offsetLeft: 30, position: "label-top", value: "05:00 PM", inputWidth:60, disabled:true} ]}, {type: "select", name: "end_all_day", label: "", inputWidth: 300, hidden:true, options:[ {value: "First Half", text: "First Half"}, {value: "Second Half", text: "Second Half"} ]} ]}, ]},

#7

Could you please, provide wit ha complete demo, where the problem can be reproduced. As the problem cannot be reproduced with the default dhtmlxCalendar css settings.
Her you can find a tutorial about creating a complete demo:
docs.dhtmlx.com/tutorials__auxi … pport.html