Server side add color / not editable

Scheduler Javascript
#1

Hi,

I have a few events added by the server logic and not by the ‘user’.

I would like to attach a different color to these events and make then ‘not editable’ by the user.

Is this possible ?

If so how ?

I have looked at the current documentation and I can see color / ‘not editable’ logic but I cannot understand how to fit it into the scenario I am looking at.

Thanks,

Note: I am using JSON for the transport of the events between the client and the server.

#2

Hello,

Check following sample:

[code]

<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">

<style type="text/css" media="screen">
    html, body{
        margin:0;
        padding:0;
        height:100%;
        overflow:hidden;
    }

    /*event in day or week view*/
    .dhx_cal_event.past_event div{
        background-color: black !important;
        color: white !important;
    }
    /*multi-day event in month view*/
    .dhx_cal_event_line.past_event{
        background-color: black !important;
        color: white !important;
    }
    /*event with fixed time, in month view*/
    .dhx_cal_event_clear.past_event{
        color: black !important;
    }

    .dhx_cal_event.event_math div, .dhx_cal_event_line.event_math{
        background-color: orange !important;
        color: blue !important;
    }
    .dhx_cal_event_clear.event_math{
        color: blue !important;
    }

    .dhx_cal_event.event_science div, .dhx_cal_event_line.event_science{
        background-color: #add8e6 !important;
        color: #8b0000 !important;
    }
    .dhx_cal_event_clear.event_science{
        color: #8b0000 !important;
    }

    .dhx_cal_event.event_english div, .dhx_cal_event_line.event_english{
        background-color: #e0ffff !important;
        color: #008b8b !important;
    }
    .dhx_cal_event_clear.event_english{
        color: #008b8b !important;
    }

</style>

<script type="text/javascript" charset="utf-8">
    function init() {
        scheduler.config.xml_date="%Y-%m-%d %H:%i";
        scheduler.config.time_step = 30;
        scheduler.config.multi_day = true;
        scheduler.locale.labels.section_subject = "Subject";
        scheduler.config.first_hour = 6;

        var control_date = new Date(2011, 3, 20);
        scheduler.templates.event_class=function(start, end, event){

            if(start<control_date) // event start before control date
                return "past_event";

            if(event.subject) // if event has subject property then special class should be assigned
                return "event_"+event.subject;

            return ""; // default return

            /*
                Note that it is possible to create more complex checks
                events with the same properties could have different CSS classes depending on the current view:

                var mode = scheduler.getState().mode;
                if(mode == "day"){
                    // custom logic here
                }
                else {
                    // custom logic here
                }
            */
        };

        var subject = [
            { key: '', label: 'Appointment' },
            { key: 'english', label: 'English' },
            { key: 'math', label: 'Math' },
            { key: 'science', label: 'Science' }
        ];

        scheduler.config.lightbox.sections=[
            {name:"description", height:43, map_to:"text", type:"textarea" , focus:true},
            {name:"subject", height:20, type:"select", options: subject, map_to:"subject" },
            {name:"time", height:72, type:"time", map_to:"auto" }
        ];

        scheduler.init('scheduler_here', new Date(2011, 3, 18), "week");

        scheduler.parse([
            { start_date: "2011-04-18 09:00", end_date: "2011-04-18 12:00", text:"English lesson", subject: 'english' },
            { start_date: "2011-04-20 10:00", end_date: "2011-04-21 16:00", text:"Math exam", subject: 'math' },
            { start_date: "2011-04-21 10:00", end_date: "2011-04-21 14:00", text:"Science lesson", subject: 'science' },
            { start_date: "2011-04-23 16:00", end_date: "2011-04-23 17:00", text:"English lesson", subject: 'english' },
            { start_date: "2011-04-24 09:00", end_date: "2011-04-24 17:00", text:"Usual event" }
        ], "json");

    }
</script>
 
 
[/code] [quote] and make then 'not editable' by the user. [/quote] Check \scheduler\samples\03_extensions\14_readonly_event.html sample.

Best regards,
Ilya

#3

I have the readonly logic working now but can I confirm that with:

scheduler.config.details_on_dblclick = true;
scheduler.attachEvent(“onBeforeDrag”,block_readonly);
scheduler.attachEvent(“onClick”,block_readonly);

function block_readonly(id){
if (!id) return true;
return !this.getEvent(id).readonly;
}

readonly events cannot now be altered at all.

I forgot the scheduler.config.details_on_dblclick = true;
to start with and the ‘text’ was still able to be editted.

#4

Any information here ? thanks

#5

Hello,

Yeah, that seems to be right.
Anyway you can’t fully rely on the client side (as there are some many ways to change everything) and need to double check on server side that read-only events are not modified.

Best regards,
Ilya