Month View with coustom LightBox and Custome Display Values

Scheduler ASP.NET MVC
#1

I am evaluating the Scheduler for ASP.NET MVC product since we need that kind of functionality in our application. Before proceed with purchasing this, I need to get clarification for couple of items regarding the features that I expect from this product.

  1. I need to restrict scheduler only to view -Months│ and I know that I can do it by, scheduler.Views.Clear() and then
    scheduler.InitialView = “month”;
    My first question is, can the scheduler restrict to add only one event per day. (e.g: if the user click the DAY cell on month view, it should load the current event for modify, or if there is no any event, it should load the lightbox for create an event) v NO MULTIPLE EVENTS IN SINGLE DAY
  2. My second question is, I want to display my lightbox control values on the calendar month view other than the text (New Event).
    As a example, let say I have customized the lightbox with couple of textbox, select menus and radio box controlers. What I want here is, when the user do modification on lightbox and hit save, I want to display those textbox, select drop down values on the calendar DAY cell instead of default text? DAY CELL CUSTOMIZATION WITH LISTBOX CONTROL VALUES
  3. Last question is, how I can do the validation for lightbox controllers which I populated from my model class (linq to Sql)?
    Great if you can provide answers for the above questions.
#2

  1. You can catch users ‘onClick’ and ‘onEmptyClick’ events of the scheduler and add your logic. It should be done with client-side code:
    js:[code]//disable create on double-click
    scheduler.config.dblclick_create = false;
    //show lightbox on click on event
    scheduler.attachEvent(“onClick”, function(id){
    if(scheduler.getState().lightbox_id) return;//do nothing if lightbox already there

    scheduler.showLightbox(id);
    });
    //show lightbox on click on empty spot
    scheduler.attachEvent(“onEmptyClick”, function (date, native_event_object){
    if(scheduler.getState().lightbox_id) return;

    var start = scheduler.date.day_start(new Date(date));
    var end = scheduler.date.add(start, 1, ‘day’);

    var evs = scheduler.getEvents(start, end);
    if(!evs.length)//if no events in that day - create new one
    scheduler.addEventNow(start, end, native_event_object);
    else
    scheduler.showLightbox(evs[0].id);
    });
    [/code]

  2. content of month-view events is defined by scheduler.templates.event_bar_text
    It’s also easier to do on the client. Scheduler uses the same template for lightbox header, so it also needed to be overriden
    js:scheduler.xy.bar_height = 50;//important for month-cell sizing scheduler.templates.event_bar_text = function(start, end, ev){ //return displayed event text return ev.text + "<br>" + ev.details + "<br>" + ev.priority; }; //restore default lightbox header scheduler.templates.lightbox_header = function(start, end, ev){ return scheduler.templates.event_header(ev.start_date, ev.end_date, ev) + "&nbsp;" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev); };
    css:.dhx_cal_event_clear, .dhx_cal_event_line { height:50px; }

  3. check following article scheduler-net.com/docs/validation.html

#3

Thanks Aliaksandr, it worked for me. But with the No2, I didn’t get the values display as multiple lines. It does display the ev.text, but due to
tag, it didn’t display the ev.details etc. Actually I need to display those property values line by line. It seems like
tag won’t work properly. Do you know if something wrong here?

#4

Hi,
my mistake, default scheduler’s styles are loaded after custom css and overrides it.
Here is the fixed version
MonthMod.zip (1.6 MB)

#5

Thanks, it worked. I think the issue was that I used @Html.Raw(Model.Render()) instead of @Html.Raw(Model.GenerateHTML())

#6

It would also work if css setting had ‘!important’ keyword. But placing custom css between .GenerateLinks() and .GenerateHTML() is preferable way

#7

Thanks a lot Aliaksandr!!!