search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Angular 5 Calendar Custom View

Asked by Anonymous
3 months ago.

Hi there,
Just wondering if it is possible to render 10 days view without showing weekends in the calendar?

If so, can you please show me how?

Thanks.

Comment posted by Anonymous
3 months ago.

Hi DayPilot Support Team,

We are currently waiting on this before deciding whether to purchase the license or not.

If this can be answered soon, that would be great.

Thanks.

Answer posted by Dan Letecky [DayPilot]
3 months ago.

It's possible to generate a custom set of days when you switch the Calendar to Resources view and fill the "columns" array manually. A JavaScript example:

dp.viewType = "Resources";
dp.columns = [];

var first = DayPilot.Date.today().firstDayOfWeek();

for (var i = 0; i < 14; i++) {
  var day = first.addDays(i);
  var dayOfWeek = day.getDayOfWeek();

  // skip weekends
  if (dayOfWeek === 0 || dayOfWeek === 6) {
    continue;
  }
  dp.columns.push({start: day, name: day.toString("dddd MMMM d, yyyy")});
}

In Angular you may need to wrap the generation in a property:

config: any =  {
  viewType: "Resources",
  columns: this.columns
}

get columns(): any[] {
  let result = [];
  let first = DayPilot.Date.today().firstDayOfWeek();

  for (let i = 0; i < 14; i++) {
    let day = first.addDays(i);
    let dayOfWeek = day.getDayOfWeek();

    // skip weekends
    if (dayOfWeek === 0 || dayOfWeek === 6) {
      continue;
    }
    result.push({start: day, name: day.toString("ddd M/d/yyyy")});
  }
  return result;
}

See also:
https://doc.daypilot.org/calendar/resources-view/

Comment posted by Anonymous
3 months ago.

Hi Dan,

I have tried it out and i can't seem to let it render the top parts out. I have sent you the sample project that i created. If you can take a quick look at it, that would be much appreciated.

Thanks.

Comment posted by Dan Letecky [DayPilot]
3 months ago.

The columns getter implementation above contained a couple of typos and it didn't compile (fixed now).

You can also get a working Angular 5 project here:
https://code.daypilot.org/92648/angular-calendar-displaying-custom-set-of-days

Let me know if it still doesn't work.

Comment posted by Anonymous
3 months ago.

Hi Dan,

Thanks for that. That is exactly what i after. It seems like your product has all the features we need.

Thanks again for your excellent support.

New Reply
This reply is
Your name (optional):