Different date selector format on mobile

[Chris Morison]

The date format in the date selector is different on mobile:

compared to Desktop which includes the date:

Is there a way to make it display the date on mobile?  Then I would be able to remove the unnecessary double-height "Tue 9" row.  I'm only displaying a single day.

[Ram Raju Elaiyaperumal]

Hi Chris Morison,

It is indeed possible to customize the date display on mobile devices. This can be achieved by utilizing the dateRangeTemplate to modify the header date range as per your specific needs. Additionally, the header cells can be removed in mobile mode through CSS.

app.component.css

@media (max-width: 540px) {

  .e-schedule .e-vertical-view .e-header-cells {

    padding: unset;

    display: none;

  }

}

To assist you further, we have prepared a sample that aligns with your requirements. Please refer to the following link for a detailed view: [schedule-daterange-template - StackBlitz]

We hope this solution meets your needs. Please do not hesitate to reach out if you require further assistance.

Regards,

Ram

[Chris Morison]

Thank you Ram for your assitance.

Your CSS to remove the date header cells works, but leaves a small gap:

I've fixed that with:

.e-schedule .e-schedule-toolbar {
  margin-bottom: 0;
}

[Ram Raju Elaiyaperumal]

Hi Chris Morison,

You're welcome! If you have any more questions or need further assistance, feel free to ask. We're here to help!

Regards,

Ram