Change scheduler hours color based on database input

Scheduler ASP.NET MVC
#1

I use asp.net mvc/razor .(database first entity framework)
I need help to change color of schduler based on database values.
I have stored procedure that return start time and endtime for each resource.( i have 5 resources in unitsview and i get them filtered in weekview)
this duration represents the resource leave time.
I need that duration of time to appear in scheduler as grey in color.I call the stored procedure in the controller. how do i get the result to be display as grey color on scheduler. Pls help. I use unitsview, weekview and customized weekview to show 30days.
I came accross the sample to change the css of the scheduler .
docs.dhtmlx.com/scheduler/sample … oring.html
docs.dhtmlx.com/scheduler/sample … oring.html
but i don get how to apply it here for database inputs. Please guide me.

#2

Hello,
after you’ve retrieved start and end time for each colored section, you should add them to the scheduler. I don’t know how your code looks like, but assuming you have some kind of list with object that have start and end dates and resurce id, you can just iterate it and create blocked time:foreach(var config in timespanConfigs){ scheduler.TimeSpans.Add(new DHXBlockTime{ StartDate = config.StartDate, EndDate = config.EndDate, Sections = new List<Section>{ new Section("unitsivew" , new List<int>{ config.ResourceID } } }); }
scheduler-net.com/docs/blocking_and_marking.html

#3

thanks for replying. I just wanted to apply the css on scheduler to show the leave time of resources, I dont want to block the timings. Please help for the same.

#4

DHXMarkTime would do the same as DHXBlockTime, but without blocking the time
scheduler-net.com/docs/blocking_ … hxmarktime

#5

i use weekview and decade view also.
I use filter_week to filter the events on weekview by clicking the listbox i use to display the resources name.
How to mark timespan in weekview with the filter.This din’t work as my db contains datas for 7days in a week for displaying resources leavtime. here is my code:

[code] public ActionResult Index()
{
var sched = new DHXScheduler(this);
sched.Skin = DHXScheduler.Skins.Standart;
sched.LoadData = true;
sched.EnableDataprocessor = true;
sched.Config.xml_date = “%m/%d/%Y %H:%i”;

        sched.BeforeInit.Add("scales()");
     //sched.AfterInit.Add("fx()");
        sched.BeforeInit.Add("customeventbox()");
        sched.BeforeInit.Add("filterweek()");
        sched.Config.drag_create = false;
       
        var unit = new UnitsView("units", "unitID");
       var rooms = new List<object>(){
new { key = "1", label = "Employee1"},
new { key = "2", label = "Employee2"},
new { key = "3", label = "Employee3"},
new { key = "4", label = "Employee4"}
    };
        unit.AddOptions(rooms);
        sched.Views.Add(unit);
        sched.InitialView = "units";
        var date = sched.InitialDate;
        sched.InitialDate = new DateTime();
        sched.Views.Add(new DecadeView()
        {
            Label = "Decade"
        });
        Items = new List<SelectListItem>{ 
            new SelectListItem {Text = "Employee1", Value = "1"}, 
            new SelectListItem {Text = "Employee2", Value = "2"}, 
         new SelectListItem {Text = "Employee3", Value = "3"} ,
         new SelectListItem {Text = "Employee4", Value = "4"} 
                };

        ViewData["Customer"] = Items;

//this din’t work*****
sched.TimeSpans.Add(new DHXMarkTime()
{
//Day = DayOfWeek.Saturday, //marks each Saturday with the ‘green_section’ style
//CssClass = “green_section”
StartDate = new DateTime(2013, 10, 20),
EndDate = new DateTime(2013, 10, 28),
Sections = new List() { new Section(“week”, new string[] { “2” }) },
SpanType = DHXTimeSpan.Type.BlockEvents,

            HTML = "<b> Blocked </b>",
            CssClass = "gray_section"

        });

//**********************************************

        //sched.TimeSpans.Add(new DHXMarkTime()
        //{
        //    Day = DayOfWeek.Saturday, //marks each Saturday with the 'green_section' style
        //    CssClass = "green_section",
        //    Sections = new List<Section>() { new Section("decade", new string[] { "2" }) },



        //});

//this works
//sched.TimeSpans.Add(new DHXMarkTime()
//{
// //Day = DayOfWeek.Saturday, //marks each Saturday with the ‘green_section’ style
// //CssClass = “green_section”
// StartDate = new DateTime(2013, 9, 20),
// EndDate = new DateTime(2013, 9, 28),
// Sections = new List() { new Section(“units”, new string[] { “2” }) },
// SpanType = DHXTimeSpan.Type.BlockEvents,

        //    HTML = "<b> Blocked </b>",
        //    CssClass = "gray_section"

        //});

        return View(sched); 

    }[/code]

index.cshtml:
// this is the filter and listbox i use to filter resources in weekview

[code]
$(document).ready(function () {
$(’#CusList’).bind(“click”, function () {
debugger;
var resid = document.getElementById(‘CusList’);
var id = resid.options[resid.selectedIndex].value;
scheduler.updateView();
});
$(’#btnok’).bind(“click”, function () {
debugger;

            scheduler.setCurrentView();
        });
    });

    $(function () {
        $("select[name='CusList']")
            .removeAttr('multiple')
            .attr('size', '8')
        .find('option:first').attr('selected', 'selected');
    });
    function filterweek() {
        scheduler.filter_week = function (id, event) {
            var a = document.getElementById('CusList');
            var cid = a.options[a.selectedIndex].value;

            //if (event.unitID == cid)
            if (event.unitID == cid)
                return true; // event will be filtered (not rendered)
            //or
            return false; // event will be rendered
        }
    }


</script>[/code]