1. Home
  2. Forum
  3. Angular - EJ 2
  4. Is there a way to switch to 24 hr display? And question about templates

Is there a way to switch to 24 hr display? And question about templates

Hi!

So yeah, I changed the localization to German but the Schedule still shows AM-PM on all events.

How can I remove this and have 24 hr display? Unfortunately the Documentation is kind of thin for this control atm.

Also I pretty much like the Month Agenda View but I'd like to disconnect the Agenda which is displayed below the calendar and move it to the right side.
Would probably put the schedule in a bootstrap col-8 and the agenda in a bootstrap col-4 and would like it to stay there when changing views.

I tried some things but ended up rendering two schedules which can't be the right way.

Thanks

Paul

5 Replies
VS Velmurugan S Syncfusion Team June 15, 2018 12:37 PM UTC

Hi Paul, 
  
Thanks for Contacting Syncfusion support. 
  
Please find the following response for your queries: 
  
Query #1:  I changed the localization to German but the Schedule still shows AM-PM on all events. How can I remove this and have 24 hr display? 
  
We have checked the reported scenario and confirming that the reported scenario is an issue which we have already fixed internally. We will include this fix in our upcoming next release Volume-2 2018.  
  
Query #2: Unfortunately the Documentation is kind of thin for this control atm. 
  
We regret for the inconvenience, Currently we are drafting complete UG documentation on how to use the scheduler in combination with various other features and will publish it soon in this Volume-2 2018 release for sure. 
Query #3: Also I pretty much like the Month Agenda View but I'd like to disconnect the Agenda which is displayed below the calendar and move it to the right side. 
  
We have prepared the sample to meet your requirement Month Agenda View with Agenda in right side by changing some CSS styles, which can be downloaded from the following location. 
  
  
Please refer to the following code example (CSS Styles) used in the above sample to meet your requirement. 
app.component.cs 
  
@Component({ 
  selector: 'app-root', 
  templateUrl: 'app.component.html', 
  styles: [` 
  .e-month-agenda-view .e-content-wrap { 
    width: 100% !important; 
  } 
  
  .e-month-agenda-view .e-content-wrap .e-content-table, 
  .e-month-agenda-view .e-date-header-wrap { 
    width: 50%; 
    float: left; 
   } 
  .e-month-agenda-view .e-content-wrap .e-appointment-wrap { 
    height: 200px !important; 
   }`], 
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService], 
  encapsulation: ViewEncapsulation.None 
}) 
  
  
Month Agenda View Display: 
  
 
  
Kindly try with the above sample and let us know if you need any further assistance on this. 
Regards, 
Velmurugan

PK Paul Kocher June 15, 2018 02:18 PM UTC

Hi Velmurugan,

outstanding. Thank you so much sir!!

VS Velmurugan S Syncfusion Team June 18, 2018 06:26 AM UTC

Hi Paul,  
  
You are most welcome.  
  
We are glad that our provided solution helped you to meet your requirement. Please let us know if you need any further assistance on this.  
  
Regards,  
Velmurugan 


PK Paul Kocher July 6, 2018 09:58 AM UTC

Hi Velmurugan,

after the last update, the AM/PM issue is fixed which is great. 

It does look like something on the design changed aswell since the css no longer works. I can't click on any date in the calendar neither can I change the month when the css is applied - removing it fixes everything but it doesn't look the way I need it.

Hope u can help

VS Velmurugan S Syncfusion Team July 9, 2018 01:12 PM UTC

Hi Paul, 
 
We regret for the inconvenience caused, as we have made some source-side improvements in the layout rendering structure due to which our previously provided application-end CSS code example failed to meet your mentioned requirements. Therefore, we request you to use the following updated code example to work flexibly with date clicking action. 
 
@Component({ 
  selector: 'app-root', 
  templateUrl: 'app.component.html', 
  styles: [` 
  .e-month-agenda-view .e-content-wrap { 
    width: 100% !important; 
    display: flex; 
} 
.e-month-agenda-view .e-content-wrap .e-content-table, 
.e-month-agenda-view .e-content-wrap .e-wrapper-container, 
.e-month-agenda-view .e-date-header-container { 
    width: 50% !important; 
} 
.e-month-agenda-view .e-content-wrap .e-wrapper-container, 
.e-month-agenda-view .e-content-wrap .e-appointment-wrap { 
  height: 200px !important; 
}`], 
  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService], 
  encapsulation: ViewEncapsulation.None 
}) 
 
 
 
Kindly try with the above update code example and let us know, if you need any further assistance on this. 
Regards, 
Velmurugan

Loader.
Up arrow icon