DHTMLX Scheduler in mVC - asp.net-mvc-4

Question

I am using DHTMLX Scheduler in my MVC Application. In my scheduler when we drag and the drop the timings a popup will be displayed which is working by default scheduler.js file. My problem is while dragging the time i need to display the custom popup window. Is it possible to do with the scheduler?
Can any one please help me.
Code for scheduler is
public ActionResult CalendarView(int? id, int? CustomerUserid)
{
//id = (int)Session["BUId"];
if (CustomerUserid == (int)Session["UserID"] || (CustomerUserid == (int)Session["UserID"] && id == (int)Session["BusinessId"]))
{
var scheduler = new DHXScheduler(this);
string val = System.Configuration.ConfigurationManager.AppSettings["UserTypeId"];
int code = Convert.ToInt32(val);
//var cuid = (int)Session["UserID"];
// List<tblUser> user = new List<tblUser>();
// var user1 = (from s in user
// where s.UserTypeId == 3 && s.UserID == cuid
// select new Appt
// {
// AddCustomer = s.DependentCustomer.ToString()
// }).ToList();
var cal = (from s
in db.tblUsers
where s.UserTypeId == code && s.UserID == id
select new Appt
{
BusinessName = s.tblBusinessCategory.BusinessName
// StartTime = s.WorkingHour.StartTime,
}).FirstOrDefault();
var sa = (from a
in db.WorkHours
where a.BusinessUserId == id
select new Appt
{
StartTime = a.StartTime,
EndTime = a.EndTime
}).FirstOrDefault();
Session["StartTime"] = sa.StartTime.Hour;
Session["EndTime"] = sa.EndTime.Hour;
Session["BUName"] = cal.BusinessName.ToString();
// var scheduler = new DHXScheduler(this);//{ InitialDate = new DateTime(2015, 1, 30) };
scheduler.Skin = DHXScheduler.Skins.Flat;
scheduler.Data.Loader.PreventCache();
scheduler.EnableDynamicLoading(SchedulerDataLoader.DynamicalLoadingMode.Week);
scheduler.Extensions.Add(SchedulerExtensions.Extension.Recurring);
//scheduler.Extensions.Add(SchedulerExtensions.Extension.ActiveLinks);
//scheduler.Extensions.Add(SchedulerExtensions.Extension.Collision);
scheduler.Extensions.Add(SchedulerExtensions.Extension.Limit);
scheduler.Config.limit_start = new DateTime(2015, 8, 25);
scheduler.Config.limit_end = new DateTime(2015, 9, 25);
scheduler.LoadData = true;
scheduler.EnableDataprocessor = true;
scheduler.Config.show_loading = true;
// scheduler.Config.buttons_left = ["dhx_save_btn","dhx_cancel_btn","locate_button"];
//var button = new LightboxButtonList();
//scheduler.Lightbox.Add();
int days = System.DateTime.Now.Day - 1;
int months = System.DateTime.Now.Month;
int years = System.DateTime.Now.Year;
int ihour = System.DateTime.Now.Hour;
int iminute = System.DateTime.Now.Minute;
int isecond = System.DateTime.Now.Second;
scheduler.TimeSpans.Add(new DHXBlockTime()
{
StartDate = new DateTime(2014, 2, 10),
EndDate = new DateTime(years, months, days + 1, ihour, iminute, isecond),
});
Session["BUId"] = id;
var parameter = new SqlParameter[1];
parameter[0] = new SqlParameter { ParameterName = "UserId", Value = id };
List<Appt> cm = new List<Appt>();
using (SYTEntities context = new SYTEntities())
{
cm = context.Database.SqlQuery<Appt>("exec spHoliday #UserId", parameter).ToList();
}
int iyear = 2015;
int imonth = 8;
int iday = 09;
//int ihour = 10;
int imin = 05;
int isec = 00;
foreach (var cp in cm)
{
iyear = cp.HolidayDate.Year;
imonth = cp.HolidayDate.Month;
iday = cp.HolidayDate.Day;
scheduler.TimeSpans.Add(new DHXMarkTime()
{
StartDate = new DateTime(iyear, imonth, iday), //new DateTime(2015, 8, 06), //hl.HolidayDate ?? default(DateTime),
EndDate = new DateTime(iyear, imonth, iday + 1),
// Day = DayOfWeek.Friday,
CssClass = "red_section",
HTML = "hos",
SpanType = DHXTimeSpan.Type.BlockEvents
});
}
var parameters = new SqlParameter[1];
parameters[0] = new SqlParameter { ParameterName = "BusinessUserId", Value = id };
List<Appt> wt = new List<Appt>();
using (SYTEntities context = new SYTEntities())
{
wt = context.Database.SqlQuery<Appt>("exec spGetWaitingList #BusinessUserId", parameters).ToList();
}
int ihr;
int imts;
int idayd;
int iyr;
int imnth;
int ihrs;
foreach (var cs in wt)
{
iyr = cs.EndTime.Year;// System.DateTime.Now.Year;
imnth = cs.EndTime.Month;// System.DateTime.Now.Month;
idayd = cs.EndTime.Day;// System.DateTime.Now.Day;
ihr = cs.EndTime.Hour; //.Hours; //.Hour;
imts = cs.EndTime.Minute; //.Minutes; //.Minute;
isec = cs.EndTime.Second; //.Seconds;
ihrs = cs.EndTime.Hour - cs.StartTime.Hour;
scheduler.TimeSpans.Add(new DHXMarkTime()
{
StartDate = new DateTime(iyr, imnth, idayd, ihr, imts, isec), //new DateTime(2015, 8, 06), //hl.HolidayDate ?? default(DateTime),
EndDate = new DateTime(iyr, imnth, idayd, ihr, imts, isec),
// Day = DayOfWeek.Friday,
CssClass = "green_section",
HTML = "",
SpanType = DHXTimeSpan.Type.BlockEvents
});
}
//for (int i = 0; i < 4; i++)
//{
// scheduler.TimeSpans.Add(new DHXMarkTime()
// {
// StartDate = new DateTime(iyear, imonth,iday,ihour, imin, isec), //new DateTime(2015, 8, 06), //hl.HolidayDate ?? default(DateTime),
// EndDate = new DateTime(iyear, imonth, iday,ihour, imin, isec),
// CssClass = "red_section",
// SpanType = DHXTimeSpan.Type.BlockEvents
// });
//}
scheduler.BeforeInit.Add("schedulerClient.init()");
//var check = new LightboxCheckbox("highlighting", "Important") { MapTo = "color", CheckedValue = "#FE7510" };
//scheduler.Lightbox.Add(check);
return View(scheduler);
}
return View();
}
Image

Answer 1

Do you mean you need to show some kind of popup showing additional info during task move/resize?
If so, you can use template for task content - if the current task is being dragged or resized, a template should return an absolute positioned popup with a custom content
E.g.
JS:
scheduler.attachEvent("onSchedulerReady", function () {
var headerTemplate = scheduler.templates.event_header;
scheduler.templates.event_header = function (start, end, event) {
var content = headerTemplate(start, end, event);
if (scheduler.getState().drag_id == event.id) {
var dragPopup = "<div class='drag-popup'>" + headerTemplate(start, end, event) + "</div>";
content += dragPopup;
}
return content;
};
});
CSS:
.drag-popup{
position: absolute;
right:0;
top: 0;
margin-right: 120px;
padding: 10px;
width: 100px;
background-color: inherit;
color: inherit;
z-index: 5;
}
Result:
Although, with this approach you'll need to manage tooltip position more thoughtfully than i did in this sample. Since popup is nested in event's DOM element, it will be limited by a scheduler container. E.g. when event is in left-most column - you'll need to locate popup at right, otherwise it will be cutted.
Here are the related API methods
http://docs.dhtmlx.com/scheduler/api__scheduler_getstate.html
http://docs.dhtmlx.com/scheduler/api__scheduler_event_header_template.html