Manage multiple events states and schedule by group

[Jaden Dumber]

Good morning everyOne,

First of All I want to thank for the amazing product you created , I really appreciate it. The problem i'm facing right now is the following:

I want to manage multiple event state by group let's take a concrete exemple to understand it .

Let's suppose i work for an Hospital , when i sign in in the app , i want to be able to switch between my scheduler and my patients scheduler, In this case a patient can also notify to his doctor when he's available to a simple check up e.g. Bellow the functionnalities that i want to achieve : 

• As User (Doctor or Patient) : - 
• See the scheduler of my patients (or doctor) and request them (him) an event (meet). An event  
  wil be requested in patients (or doctor) scheduler only if the slot is available
  (There are no event planned already , We Can't have more than one event in a slot)
• See my scheduler (as doctor or patient)  to block multiple slot to notify my patients (or doctor) i'm not available a this time. I also sould see the all event requested , planned or canceled An Event can have 3 state ( request , confirmed , cancel)

I was able to display the scheduler by group (only in one way like: As a doctor i can see the scheduler of me patients , but i can find a way to swtich to mine) , create different state of event (Using Enum) or block the popup "CRUD Event" when there already an event . But i'm not statisfay with my solution . If you want i can share what i have done and what i want to achieve . Thank's by advance for the support and the help i appreciate it .

[Balasubramanian Sattanathan]

Hi Jaden,

We couldn't get the requirement clearly with the given details. So, can you please share more details such as use case scenario with screenshot/video demo? Because it will be very useful to validate the requirement and provide a prompt solution. 

Regards,
Balasubramanian S

[Jaden Dumber]

Hello Sattanathan, 

Thanks for the quick reply and support i appreciate. Sure, the picture that i added below show a short example of what i want to achieve. To be clear there are 2 cases , but for now let's be focus on the first only . When a  user (doctor or patient) is authenticate in the app he can see his own scheduler and manage it (in this case i'm connected as a Doctor) . As you noticed my events are displayed in the scheduler with different color (that means state of an event) . The events are groupping in 6 different states and 2 classes  : Block , Busy slot , Available slot, Requested, Confirmed and Canceled.  Bellow the explanation of what i mean by class: 

First class Event : Includes : Block (light red) , Busy slot (orange) and Available slot (blue). These events notify the other users (co-worker , patients..) about my availability . Obviously , when they look at my scheduler they only can see when i'm free or busy not interact on these events.

1. Block Event : Notify that i'm not at all available  in a particular slot. So it block all action event by others users. But in any moment i can remove this event to release the slot
2. Busy Slot Event : Notify that in a particular slot i can be busy for many reason but it doesn't block any request event by others users , it's just to notify them that there a chance that i can't confirm request event in this slot.
3. Available Slot Event: Notify that in a particular slot i'm free , Let's suppose a patient canceled an event , to not waste time ,  i can notify other user that i'm free on this slot , so they can request me an event if they want .

Second class Event : Includes : Request (light gray) , Confirmed (green) and Canceld (red). These events need the involvement of others users to exist .

1. Request Event : Means a user send me a request for a meet in a particular slot. I can only get one request event by slot , that means if i already get a request event in a particular slot , it's blocked . So others users can't send me a request event for this particular slot , as long as i'dont deny  the request event or simply block it (First class event). 
2. Confirmed Event : Means a meet (event) is planned with a user in a particular slot.  it's blocked . So others users can't send me a request event for this particular slot or i can't add an event from First Class , as long as i'dont canceled​ the confirmed event . 
3. Canceled Event: Means that I or the user canceled the event. This kind of event is not blocked that means , i can get request event or simply add event from First class . But When i hover this kind of event a tooltip or popovers should appear just to show who's canceled the event and when .

Note: In the Toolbar The Events from Second class should be displayed groupping by state and number . 

I would like to thank you a lot for the time , the energy and precious help that you devoted. 

[Balasubramanian Sattanathan]

Hi Jaden,

Your requirement can be achieved by using the eventRendered event with a custom field type. Please find the below sample.

https://stackblitz.com/edit/angular-4fsnow?file=app.component.ts

Regards,
Balasubramanian S

[Jaden Dumber]

Hi Sattanathan, 

Thank's for support, i was able to manage status colors in a different way but your solution is much better!

what i'm trying to do right now is to : 

- Add status notification as html element in toolbar

- Block QuickInfo popup where there is an Confirmed Event in a cell already 

i was able to achieve this in a weird way , but i'm not satisfy with it. Please find bellow the code 

https://stackblitz.com/edit/angular-4fsnow-5zvykw?file=app.component.ts

Sincerely Yours, 

Dumber Jaden.

[Vengatesh Maniraj]

Add status notification as html element in toolbar
 

Please find the onActionBegin event 

  public onActionBegin(args: ActionEventArgs): void {

    if (args.requestType === 'toolbarItemRendering') {

      const requestItem: ItemModel = {

        align: 'Center',

        cssClass: 'e-schedule-user-icon',

        template:

          '<div class="request"><span style="border-radius:50%;background-color:gray;padding:4px;color:white">3</span> Request</div></div>',

      };

      args.items.push(requestItem);

      const confirmedItem: ItemModel = {

        align: 'Center',

        cssClass: 'e-schedule-user-icon',

        template:

          '<div class="confirmed"><span style="border-radius:50%;background-color:green;padding:4px;color:white">2</span> Confirmed</div></div>',

      };

      args.items.push(confirmedItem);

      const cancelItem: ItemModel = {

        align: 'Center',

        cssClass: 'e-schedule-user-icon',

        template:

          ' <div class="cancel"><span style="border-radius:50%;background-color:red;padding:4px;color:white">2</span> Cancel</div></div>',

      };

      args.items.push(cancelItem);

    }

  }

 

Block QuickInfo popup where there is an Confirmed Event in a cell already 
 

Blocked the quick popup by making use of the isSlotAvailable method. 

  onPopOpen(args: any) {

    if (args.type === 'QuickInfo' || args.type === 'Editor') {

      if (!this.scheduleObj.isSlotAvailable(args.data)) {

        args.cancel = true;

        alert('Already booked');

      }

    }

[Jaden Dumber]

Hi Maniraj, 


Thanks for the reply and help. i was able to figure out the problem with " Add status notification as html element in toolbar" thanks to your help.

The problem still persist  about "Block QuickInfo popup where there is an Confirmed Event in a cell already".
The function "IsSlotAvailable" block the QuickInfo popup , whatever the event there are. I need just 
to block the QuickInfo popup for a particular event , the event with a "Confirmed" (event in green color) status only.

Sincerely Yours, 

Dumber Jaden.

[Vengatesh Maniraj]

Please find the solution below. 

 onPopOpen(args: any) {

    if (args.type === 'QuickInfo' && args.data.EventType === 'Confirmed') {

      args.cancel = true;

    }

  }

 

Sample: https://stackblitz.com/edit/angular-4fsnow-blgi47?file=app.component.ts 

 

[Jaden Dumber]

Hi Maniraj,

Thank's, Sorry if i wasn't clear on my explanation.

To be more specific , i want just to block QuickInfo popup when i click on a cell where there is an "Confirmed event".

That means i can't have 2 events on a same slot if there is a Confirmed event already on it (Block QuickInfo popup to add an event on same slot of a Confirmed event) . 

Obviously, if i click on the Confirmed event itself the QuickInfo Popup should open with the information of the event.

Sincerely Yours, 

Dumber Jaden.

[Vengatesh Maniraj]

Hi Dumber Jaden,

Thanks for the clear details.

Please find the modified code below and this block the popup opening when we click on the confirmed cell and open in normal event click.

  onPopOpen(args: any) {

    if (

      args.type === 'QuickInfo' &&

      !args.target.classList.contains('e-appointment')

    ) {

      let renderedEvents = this.scheduleObj.getEvents(

        args.data.startTime,

        args.data.endTime,

        true

      );

      let confirmed = renderedEvents.find((x) => x.EventType === 'Confirmed');

      if (!isNullOrUndefined(confirmed)) {

        args.cancel = true;

      }

    }

  }

Sample: https://stackblitz.com/edit/angular-4fsnow-znewa2?file=app.component.ts

Please try the above sample and let us know if you need any further assistance.

Regards,

Vengatesh 

[Jaden Dumber]

Hello Maniraj, 

Thank you very much for the help ! That's exactly what I want to achieve.
I also want to achieve one more thing but I will post my request in another topic.

Regards,
Jaden Dumber

[Vengatesh Maniraj]

Hi Jaden,

You are most welcome!!!

Yes. Kindly post your new query by creating a separate forum. We will happy to assist you.

Regards,

Vengatesh