Angular-calendar: 24-hour clock

Created on 26 Oct 2016 · 13Comments · Source: mattlewis92/angular-calendar

Is it possible to change the time and clock of the calendar to 24-hour clock format?

For example:

13:00 instead 1PM

23:00 instead of 11PM

Source

theunreal

Most helpful comment

You can use DI to handle this:

import {CalendarNativeDateFormatter, DateFormatterParams, CalendarModule} from 'angular2-calendar';

class CustomDateFormatter extends CalendarNativeDateFormatter {

  public dayViewHour({date, locale}: DateFormatterParams): string {
    // change this to return a different date format
    return new Intl.DateTimeFormat(locale, {hour: 'numeric'}).format(date);
  }

}

@NgModule({
  import: [CalendarModule],
  providers: [
    CalendarEventTitleProvider, 
     {provide: CalendarDateFormatter, useClass: CustomDateFormatter}
  ]
})
class ModuleThatUsesTheCalendar{}

mattlewis92 on 27 Oct 2016

❤5 👍2

All 13 comments

You can use DI to handle this:

import {CalendarNativeDateFormatter, DateFormatterParams, CalendarModule} from 'angular2-calendar';

class CustomDateFormatter extends CalendarNativeDateFormatter {

  public dayViewHour({date, locale}: DateFormatterParams): string {
    // change this to return a different date format
    return new Intl.DateTimeFormat(locale, {hour: 'numeric'}).format(date);
  }

}

@NgModule({
  import: [CalendarModule],
  providers: [
    CalendarEventTitleProvider, 
     {provide: CalendarDateFormatter, useClass: CustomDateFormatter}
  ]
})
class ModuleThatUsesTheCalendar{}

mattlewis92 on 27 Oct 2016

❤5 👍2

Hi @mattlewis92, Can you please help me to implement this? I can't get it to work..

eliortabeka on 7 Jun 2017

It seems like you need to force the locale to make this work, using canadian seems to do the trick: http://plnkr.co/edit/INtKoU2Tony08Soqy8x7?p=preview

mattlewis92 on 7 Jun 2017

👍2

@mattlewis92 Thank you for the fast response!

eliortabeka on 7 Jun 2017

@mattlewis92, One more thing please - why I don't see the events in the Calendar .. ?
http://plnkr.co/edit/Ve1VQN3AjoiYNDM3RRto?p=preview

eliortabeka on 7 Jun 2017

There was no color set on each event (check the console output in your plunker). TS should complain about the missing properties in a real app though. http://plnkr.co/edit/b4fbs11FBOeldGifjmpt?p=preview

mattlewis92 on 7 Jun 2017

🎉1

@mattlewis92 You are rock 👍 Thanks

eliortabeka on 7 Jun 2017

Error in importing CalendarEventTitleProvider in my case.

megamind2301 on 17 Jul 2017

Hi, how to calculate no of days and hours from startDate and endDate when we add new event

nareshkumargv on 21 Mar 2019

@mattlewis92
I need to show only from 09:00 to 17:00 hours in day view?
how can I achieve this?

harsh-khandelwalcs on 9 Aug 2020

@harsh-khandelwalcs i think you can use daystartHour and dayEndHOur Attribute of the Calendar so for example:

<mwl-calendar-day-view
                            [viewDate]="viewDate"
                            [events]="events"
                            [locale]="locale"
                            [weekStartsOn]="startWeek"
                            [dayStartHour]="9"
                            [dayEndHour]="17">
    </mwl-calendar-day-view>

That would be a day view only from 09:00 to 17:00 hours

JustinDuchow01 on 11 Oct 2020

Elegant solution, thank you very much!

For >= angular 9, the CustomDateFormatter should have a @Injectable() annotation - for >= angular 10, it must have the annotation.

stefanzugal on 16 Mar 2021

@Everyone Hi, How can I add an event with startTime as 10:25PM and endTime as 11:15PM, then plot it on the calendar day view to show that exact time on the calendar as an event. The view is in THIS format. i.e 1PM = 13:00