/// <summary> /// Custom event containers /// </summary> /// <returns></returns> public ActionResult CustomEventBox() { var sched = new DHXScheduler(this); sched.Skin = DHXScheduler.Skins.Terrace; //helper for event templates, //it also can be defined on the client side var evBox = new DHXEventTemplate(); evBox.CssClass = sched.Templates.event_class = "my_event";//class to be applied to event box // template will be rendered to the js function - function(ev, start, end){....} // where ev - is event object itself // template allows to inject js code within asp.net-like tags, and output properties of event with simplified sintax // {text} is equivalent to ' + ev.text + ' evBox.Template = @"<div class='my_event_body'> <% if((ev.end_date - ev.start_date) / 60000 > 60) { %> <span class='event_date'>{start_date:date(%H:%i)} - {end_date:date(%H:%i)}</span><br/> <% } else { %> <span class='event_date'>{start_date:date(%H:%i)}</span> <% } %> <span>{text}</span> <br> <div style=""padding-top:5px;""> Duration: <b><%= Math.ceil((ev.end_date - ev.start_date) / (60 * 60 * 1000)) %></b> hours </div> </div>"; sched.Templates.EventBox = evBox; sched.LoadData = true; sched.EnableDataprocessor = true; return(View(sched)); }
/// <summary> /// Custom event containers /// </summary> /// <returns></returns> public ActionResult CustomEventBox() { var sched = new DHXScheduler(this); sched.Skin = DHXScheduler.Skins.Terrace; //helper for event templates, //it also can be defined on the client side var evBox = new DHXEventTemplate(); evBox.CssClass = sched.Templates.event_class = "my_event";//class to be applied to event box // template will be rendered to the js function - function(ev, start, end){....} // where ev - is event object itself // template allows to inject js code within asp.net-like tags, and output properties of event with simplified sintax // {text} is equivalent to ' + ev.text + ' evBox.Template = @"<div class='my_event_body'> <% if((ev.end_date - ev.start_date) / 60000 > 60) { %> <span class='event_date'>{start_date:date(%H:%i)} - {end_date:date(%H:%i)}</span><br/> <% } else { %> <span class='event_date'>{start_date:date(%H:%i)}</span> <% } %> <span>{text}</span> <br> <div style=""padding-top:5px;""> Duration: <b><%= Math.ceil((ev.end_date - ev.start_date) / (60 * 60 * 1000)) %></b> hours </div> </div>"; sched.Templates.EventBox = evBox; sched.LoadData = true; sched.EnableDataprocessor = true; return View(sched); }
/// <summary> /// Index /// </summary> /// <returns></returns> public ActionResult Index() { _scheduler = new DHXScheduler(this) { Config = { first_hour = 5, last_hour = 24, hour_size_px = 88, time_step = 30, //full_day = true, // Chọn thời gian cho cả ngày separate_short_events = true, wide_form = true, show_loading = true, // show tooltip Tooltip_ClassName = "dhtmlXTooltip tooltip", Tooltip_timeout_to_display = 50, Tooltip_delta_x = 10, Tooltip_delta_y = -20, }, Skin = DHXScheduler.Skins.Flat, XY = { scroll_width = 0, }, Height = 650, //AjaxMode = TransactionModes.REST, }; // Set language //_scheduler.Localization.Directory = "locale"; //_scheduler.Localization.Set(SchedulerLocalization.Localizations.English, false); var evBox = new DHXEventTemplate { CssClass = _scheduler.Templates.event_class = "my_event", //<span class='event_date'>{start_date:date(%H:%i)} - {end_date:date(%H:%i)}</span><br/> Template = @"<div class='my_event_body'> <span>by: <strong style='color: red; font-weight: bold; text-decoration: underline; text-transform: uppercase;'> {user_name}</strong></span><br> <% if((ev.end_date - ev.start_date) / 60000 > 60) { %> Begin: <span class='event_date'>{start_date:date(%H:%i)}</span><br/> End: <span class='event_date'>{end_date:date(%H:%i)}</span><br/> <% } else { %> <span class='event_date'>{start_date:date(%H:%i)}</span><br/> <% } %> <span>{text}</span><br> <div style=""padding-top:5px;""> Duration: <b><%= (ev.end_date - ev.start_date) / (60 * 60 * 1000) %></b> hours </div> </div>" }; _scheduler.Templates.EventBox = evBox; _scheduler.Templates.tooltip_text = @"<div class='tootip_date'> <span>by: <strong style='color: red; font-weight: bold; text-decoration: underline; text-transform: uppercase;'> {user_name}</strong></span><br> <% if((ev.end_date - ev.start_date) / 60000 > 60) { %> Begin: <span class='event_date'>{start_date:date(%H:%i)}</span><br/> End: <span class='event_date'>{end_date:date(%H:%i)}</span><br/> <% } else { %> <span class='event_date'>{start_date:date(%H:%i)}</span><br/> <% } %> <strong>{text}</strong><br> <span>{details}</span><br> <span>Room: <strong>{label}</strong></span><br> <% if(ev.laptop_id == null) { %> <span>Laptop: <strong>Not Use</strong></span><br> <% } else { %> <span>Laptop: <strong>{laptop_id}</strong></span><br> <% } %> <% if(ev.projector_id == null) { %> <span>Projector: <strong>Not Use</strong></span><br> <% } else { %> <span>Projector: <strong>{projector_id}</strong></span><br> <% } %> <div style=""padding-top:5px;""> Duration: <b><%= (ev.end_date - ev.start_date) / (60 * 60 * 1000) %></b> hours </div> </div>"; #region views configuration //// Lock Time => //_scheduler.TimeSpans.Add(new DHXMarkTime() //{ // FullWeek = true, // Day = DayOfWeek.Thursday, // CssClass = "red_section",// apply this css class to the section // HTML = "LockTime", // inner html of the section // Zones = new List<Zone>() { new Zone { Start = 12 * 60, End = 14 * 60 } }, // SpanType = DHXTimeSpan.Type.BlockEvents//if specified - user can't create event in this area //}); //// BlockEvents Sunday //_scheduler.TimeSpans.Add(new DHXMarkTime() //{ // Day = DayOfWeek.Sunday, // CssClass = "green_section", // SpanType = DHXTimeSpan.Type.BlockEvents //}); _scheduler.UpdateFieldsAfterSave(); _scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Day); _scheduler.Extensions.Add(SchedulerExtensions.Extension.Limit); _scheduler.Extensions.Add(SchedulerExtensions.Extension.PDF); _scheduler.Views.Clear(); //removes all views from the scheduler _scheduler.Views.Add(new WeekView()); // adds a tab with the week view var units = new UnitsView("rooms", "room_id") { Label = "Rooms", }; List<Room> rooms = null; if (Request.IsAuthenticated) { if (User.IsInRole("Manager") || User.IsInRole("General Director") || User.IsInRole("GA")) { rooms = Repository.GetAll<Room>().OrderBy(r => r.position).ToList(); } //else if (User.IsInRole("GA")) //{ // rooms = Repository.GetAll<Room>().Where(r => r.for_dept == "GA").OrderBy(r => r.position).ToList(); //} else if (User.IsInRole("Employee")) { rooms = Repository.GetAll<Room>().Where(r => r.for_dept == "Employee").OrderBy(r => r.position).ToList(); } } else { rooms = Repository.GetAll<Room>().OrderBy(r => r.position).ToList(); } var listRooms = new List<object>(); if (rooms != null) { foreach (var room in rooms) { listRooms.Add(new { key = room.key, label = room.label }); } units.AddOptions(rooms); // sets X-Axis items to names of employees } _scheduler.Views.Add(units); //adds a tab with the units view _scheduler.PreventCache(); _scheduler.Views.Add(new MonthView()); // adds a tab with the Month view _scheduler.InitialView = units.Name; // makes the units view selected initially _scheduler.Config.active_link_view = units.Name; string viewName = "meetingRoom/Home/LightboxCustomControl"; //string viewName = "Home/LightboxCustomControl"; var box = _scheduler.Lightbox.SetExternalLightbox(viewName, 730, 530); box.ClassName = "custom_lightbox"; #endregion //#region lightbox configuration //_scheduler.Lightbox.Add(new LightboxText("text", "Title") { Height = 28, Focus = true }); // adds the control to the lightbox //_scheduler.Lightbox.Add(new LightboxText("details", "Content") { Height = 60 }); //var selectRoom = new LightboxSelect("room_id", "Select Room"); //selectRoom.AddOptions(listRooms); //_scheduler.Lightbox.Add(selectRoom); //AddSelectLaptopAndProject(); //_scheduler.Lightbox.Add(new LightboxText("other_devices", "Other Devices") { Height = 50 }); //_scheduler.Lightbox.Add(new LightboxMiniCalendar("time", "Time")); //#endregion #region data // enables dataprocessor if (Request.IsAuthenticated) { _scheduler.EnableDataprocessor = true; } else { _scheduler.Config.isReadonly = true; } _scheduler.LoadData = true; //'says' to send data request after scheduler initialization _scheduler.Data.DataProcessor.UpdateFieldsAfterSave = true; //Responsive _scheduler.BeforeInit.Add(string.Format("initResponsive({0})", _scheduler.Name)); #endregion return View(_scheduler); }