Timeline Queries

Asked by BY
8 years ago.

How do I create "Day timeline" which falls on following Day?
For instance 15/06/2016 09:00 AM to 16/06/2016 09:00 AM, I want to classify as a day.
I managed to do that in ASP Web forms but it doesnt work on MVC
Our requirement is

AM – 09:00 to 13:00
PM: 13:00 to 17:00
OOH: 17:00 to 09:00 (following day)

This should be a day, it lests me to create in LoadTtime line

private void LoadTimeline(DateTime date)
{
StartDate = date; // required for later refreshes (will be persisted)
Scale = TimeScale.Manual;

const int firstShiftStartHour = 9; // first shift starts at 7 am //[BY]
// const int shiftDurationHours = 8; // one shift takes 8 hours

DateTime firstDayOfMonth = date;//new DateTime(date.Year, date.Month, 1); // first day of month //[BY]
//int days = DateTime.DaysInMonth(firstDayOfMonth.Year, firstDayOfMonth.Month);
int days = 7;
DateTime start = firstDayOfMonth.AddHours(firstShiftStartHour);
DateTime end = firstDayOfMonth.AddDays(days);

int i = 1;

while (start < end)
{
if (i == 1)
{
Separators.Add(start, Color.Red);
//start = DateTime.ParseExact(start.ToString("dd/MM/yyyy hh:mm:ss tt"), "M/d/yyyy hh:mm:ss tt", CultureInfo.InvariantCulture);
Timeline.Add(start, start.AddHours(4));
//DayPilotScheduler1.Timeline.Add(start, start.AddHours(4));
start = start.AddHours(4);
i = i + 1;

}
else if (i == 2)
{
Timeline.Add(start, start.AddHours(4));
//DayPilotScheduler1.Timeline.Add(start, start.AddHours(4));
start = start.AddHours(4);
i = i + 1;
}
else if (i == 3)
{
Timeline.Add(start, start.AddHours(16));

//DayPilotScheduler1.Timeline.Add(start, start.AddHours(16));
start = start.AddHours(16);
//DayPilotScheduler1.Separators.Add(start, Color.Red, SeparatorLayer.AboveEvents, DayPilotScheduler1.CellWidth, 50);
i = 1;
}

}
}

Your help is really appriciated

how-to mvc

daypilot-mvc-webforms-timline.png

Answer posted by Dan Letecky [DayPilot]
8 years ago.

The output under the "DayPilot MVC" section in your sample image is what I would expect to see. This is how it is designed to work - the second time header row displays days and it starts and ends at the real day start and end according to the timeline.

I'm not sure how you managed to display the day header row to be aligned with the shifts in the "DayPilot WebForms" section. However, this is how DayPilot Pro for ASP.NET WebForms worked in old (pre-7.6) releases.

If you want to align the time headers with the shifts you will need to set the GroupBy value to None and insert custom sections in the time header row using active areas. See the following demo:

http://mvc.daypilot.org/demo/Scheduler/ActiveAreas

This demo uses the following approach:

protected override void OnBeforeTimeHeaderRender(BeforeTimeHeaderRenderArgs e)
{
  e.Areas.Add(
      new Area().Start(e.Start.AddHours(6))
          .End(e.End.AddHours(-6))
          .Top(0)
          .Bottom(0)
          .Style("background-color: blue; opacity: .1;")
          .Visible());

}

You will need to insert one active area per day into the row with GroupBy=None (i.e. with e.Level == 1), with Start() and End() aligned with your shifts (i.e. at 9 AM).

No change is needed in the LoadTimeline() method.

Comment posted by BY
8 years ago.

It works. Thanks Dan

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Timeline Queries

Products

Learn

Get Support

DayPilot Pro