1. Home
  2. Forum
  3. Angular - EJ 2
  4. Schedule event within the blocked time range?

Schedule event within the blocked time range?

Hi,
I'm using angular schedule and I want to schedule for event that take nearly whole day and during the day we will have break time (e.g. lunch, break...) so I would like to know is it possible to schedule event over blocked time range?
If it's not possible, then how we can display break time (with 'break time' text and gray color) to differentiate it from normal time event?

Thank you 

7 Replies
RV Ravikumar Venkatesan Syncfusion Team April 15, 2020 01:51 PM UTC

Hi Vu, 

Greetings from Syncfusion support. 

Q1: Is it possible to schedule event over blocked time range? 

The default behavior of the block event is restrict adding a normal event over the blocked time range. So, the scheduler is not allowed to add normal event over the blocked time range. 

Q2: We can display brake time(with ‘break time’ text and gray  color) to differentiate it from normal event? 

We suspect that you asking all day event present on the timeline view on the brake time(like 01:00 PM to 02:00 PM). In this event you need to height light the only the brake time area only needs to highlighted on gray color with brake time text and the other areas of the same event is displayed as normal event. This is not possible with our Schedule. 

If this is not your query. Please share more information about your requirement which would help us to proceed further. 

Regards, 
Ravikumar Venkatesan 


VM Vu Manh Cuong April 17, 2020 02:50 AM UTC

Hi Syncfusion,
Thank you very much for your reply

So with your answer I'm afraid that the scheduler cannot meet my requirement as it need to be allowed to schedule over break time (if not they have to schedule 2 times for an event that span from morning to afternoon)

For my 2nd question, it is actually a walk around solution, to consider a break as a normal time but with a way to separate it with normal time. But it is impossible too

Best regards,



RV Ravikumar Venkatesan Syncfusion Team April 17, 2020 02:42 PM UTC

Hi Vu, 

Sorry for the inconvenience caused. 

We can display the break time as a normal event in scheduler UI by making use of cellTemplate property which allows us to customize the cells(slots) based on our requirement. We have achieved your requirement by the below code. Here we are setting the break time is 1 PM to 2 PM. 

[app.component.html] 
<div class="control-section"> 
  <div class="col-lg-9 content-wrapper"> 
    <ejs-schedule #schedule height='650px' [(selectedDate)]="selectedDate" [eventSettings]="eventSettings" [currentView]='currentView' (renderCell)="onRenerCell($event)"> 
      <ng-template #cellTemplate let-data> 
        <div class="e-templatewrap" [innerHTML]="isBreak(data.date)"></div> 
      </ng-template> 
      <e-views> 
        <e-view option="TimelineDay"></e-view> 
        <e-view option="TimelineWeek"></e-view> 
        <e-view option="TimelineWorkWeek"></e-view> 
        <e-view option="TimelineMonth"></e-view> 
      </e-views> 
    </ejs-schedule> 
  </div> 
</div> 

[app.component.ts] 
    public onRenerCell(args: RenderCellEventArgs) { 
      if(args.elementType === 'workCells' && args.date.getHours() === 13) { 
        args.element.classList.add('e-lunch-hours'); 
      } 
    } 
 
    public isBreak(date: Date) { 
      if(date.getHours() === 13) { 
        return '<div class="e-break">Break Time</div>'; 
      } 
    } 

[app.component.css] 
td.e-work-cells.e-work-hours.e-lunch-hours { 
  background-color: gray !important; 
  pointer-events: none; 
} 
 
.e-break { 
  transform: rotate(90deg) translate(30px); 
  color: white; 
} 
 
.e-template-wrap { 
    height: 100%; 
  width: 100%; 
} 

Please refer to the below links for more reference. 



Could you please confirm whether the above solution is similar to your requirement? 

Regards, 
Ravikumar Venkatesan 


VM Vu Manh Cuong April 18, 2020 02:29 AM UTC

Hi Syncfusion,
That's exactly what I wanted for my walk around requirement for break time

Thank you very much for your support
Regards

VM Vengatesh Maniraj Syncfusion Team April 20, 2020 06:45 AM UTC

Hi Vu, 

You are most welcome😊 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh  


IT ITAtChiyoda December 11, 2020 02:42 PM UTC

Dear,

I have the same kind of request for the Blazor component.

The blocked events are ideal for the visual part. They are very flexible, but in our case they shouldn't really block. (Maybe adding an option to use warnings instead of just denying events in a blocked event would be nice?).

An example with a workaround for blazor would als be good ;-).

Thanks in advance for your support! 

NR Nevitha Ravi Syncfusion Team December 14, 2020 11:43 AM UTC

Hi Mart, 
 
Greetings from Syncfusion Support. 
 
By default, we can not create appointments in the time slots of block appointment. So you can maintain custom field to the block appointments and show warnings based on the your condition in the OnActionBegin event. Please try the following sample and code snippet. 
 
    public async Task OnActionBegin(ActionEventArgs<AppointmentData> args) 
    { 
        if (args.AddedRecords != null && args.AddedRecords.Count > 0) 
        { 
            List<AppointmentData> events = await ScheduleRef.GetEvents(args.AddedRecords[0].StartTime, args.AddedRecords[0].EndTime); 
            if (events.FindAll(e => e.IsBlockRange == true).Count > 0) 
            { 
              //you can show your warnings. 
            } 
        } 
    } 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Nevitha 


Loader.
Up arrow icon