Select Value from default input

[ramiro redona]

Hi again, thanks for answering all my questions, i'm really gratefull.

Now i want to change the value of 'Hora Fin' (EndTime) that is a default value, when 'Tratamiento' (treatment), gets a value, e.x if a customer chose a treatmente that have a duration of 10 minutes, so i want the EndTime adds 10 minutes to StartTime. In conclusion i need 2 things, one is trigger a function when a treatment is chosen and two is change the value of EndTime automatically. Remember EndTime is a default value. Thanks

here is my html

<ejs-schedule #scheduleObj width="100%" height="550px" [selectedDate]="selectedDate" [views]="views"

                  [timeScale]="timeScale" [eventSettings]="eventSettings" [group]='group'

                  (popupOpen)='onPopupOpen($event)' (actionBegin)="onActionBegin($event)"

                  (eventRendered)="onEventRendered($event)" (actionComplete)='onActionComplete($event)'

                  (drag)="onItemDrag($event)" (renderCell)="onRenderCell($event)">

                  <e-resources>

                    <e-resource field="OwnerId" title="Owner" name="Owners" [dataSource]="ownerDataSource"

                      [allowMultiple]="allowMultipleCategory" textField='OwnerText' idField='Id'

                      colorField='OwnerColor'>

                    </e-resource>

                  </e-resources>

                </ejs-schedule>

[Vinitha Devi Murugan]

Hi Ramiro,

Greetings from Syncfusion Support

We have validated your reported query “one is trigger a function when a treatment is chosen and two is change the value of EndTime automatically” at our end. We suggest you to use below code to achieve your requirement. We have prepared the below sample for your reference.

https://stackblitz.com/edit/angular-endtime-change-based-on-eventtype?file=app.component.ts

  public
onDropDownChange(args) {

    let
duration;

    if (args.value == 'public-event') {

      duration = 10;

    } else {

      duration = 5;

    }

    var
startObj = (document.querySelector('.e-start') as
any).ej2_instances[0];

    var
endObj = (document.querySelector('.e-end') as
any).ej2_instances[0];

    endObj.value = new
Date(startObj.value.getTime() + 60000 * duration); // Set EndTime field based on eventType

    endObj.enabled = false; // To diable the EndTime Field

  }

Kindly try like above sample and get back to us if you need any further assistance.

Regards,

Vinitha

[ramiro redona]

Thank you very much!. It works Perfect!

[Ravikumar Venkatesan]

Hi Ramiro,

Thanks for the update.

We are happy that our solution works for you.

Regards,

Ravikumar Venkatesan

[ramiro redona]

Hi, thanks for the before solution, i have a new question, i would like painting the cells that are before and give hour, for example, if a una school open at 8:00 some days and other at 9:00 and closes everyday at 18:00, i want to paint cells out of range with a color to show that those cells are not allowed to schedule a a task. i could do paint some cells, but the problem is that always paint from 9:00 am to 5:55pm, and not the others although when show in console (doing console.log) is showing that these must be painted but it doesn't do it, i don't know if can problem of performance or i have in someplace in the code that are doing this. Thanks very much! below i put some part of the code

TS

if (this.clinicaId && args.elementType === 'workCells') {

      for (let i = 0; i < this.imp.length; i++) {

        if (this.imp[i][1] == args.date.getDay() + 1) {

          this.agendaService.agendaBH_findOne(this.imp[i][0]).pipe(

            map((bloque: any) => {

              let hora = args.date.getHours().toString()

              if (hora.length == 1) {

                hora = `0${hora}`

              }

              parseInt(hora)

              let Horaini = bloque.hora_inicio.slice(0, 2)

              parseInt(Horaini)

              let Horafin = bloque.hora_termino.slice(0, 2)

              parseInt(Horafin)

              if (hora < Horafin && hora != '00') {

                console.log('111', Horafin, hora, bloque.id, args.date.getDay(), args.element)

                args.element.classList.add('e-lunch-hours');

              }

              if ( hora > Horaini && hora != '00') {

                console.log('222', Horaini, hora, bloque.id, args.date.getDay())

                args.element.classList.add('e-lunch-hours1');

              }

            })

          ).subscribe()

        }

      }

    }

CSS

td.e-work-cells.e-work-hours.e-lunch-hours {

  background-color: gray !important;

  /* pointer-events: none; */

}

td.e-work-cells.e-work-hours.e-lunch-hours1 {

  background-color: brown !important;

  /* pointer-events: none; */

}

what i getting (attached .rar file)

Thanks again for everything!

Attachment: Pictures_78ec303.rar

[Ruksar Moosa Sait]

Hi Ramiro,

We have checked on your query and require additional details to further proceed with your requirement. So could you please get back to us with the below details that help us to check with your requirement and provide the solution earlier?

• Do you prefer to paint the cells from 09:00 AM to 06:00 PM or except that time?
• In which Schedule event(like renderCell) have you performed these actions?
• Share with us the use case scenario for e-lunch-hours1 and e-lunch-hours2 classes
• Try to replicate the issue in the previously shared sample or share a simple issue replicating sample if possible.

Regards,

Ruksar Moosa Sait

[ramiro redona]

Hi Ruksar, here the answers:

1- It has to depend, i can take these schedules from a database, so depends.

2-in the event onRenderCell doing e.x 

if (args.elementType === 'workCells' && args.date.getHours() >= 17)

3- i did it because i wanted test in what condition it enters, (after or before an specific hour) so , there isn't problem if there is only a class ( e-lunch-hours1 or  e-lunch-hours2)

4- En the before example, i discovered likely the problem is 'work  hours', by default i think is from 9am to 6pm, so only can change background color on these times, i discovered aswell that i can do an innerHtml to any other time (before 9am or after 6pm) so it can be a choice to resolve it, but i would like to change the color of the cells, (it would be better).

Below attach what i discovered

PD; if you hard pay attetion you can see that background color cells from sunday, saturday are gray as other days(monday, tuesday,etc) before 9am aswell, but after 9am the background color is white, so when the cell are gray i can't change color but other case (background color white) i can do it. Thanks

Attachment: Captura1_5aa68bd2.rar

[Vinitha Devi Murugan]

Hi ramiro,

Thanks for your update.

We have checked on the query and suggest you to use below styles to overcome your reported problem.

.e-schedule
.e-vertical-view
.e-work-cells.e-lunch-hours {

  background-color: brown
!important;

}

.e-schedule
.e-vertical-view
.e-work-cells.e-lunch-hours1 {

  background-color: brown
!important;

}

Kindly try with the above solution and get back to us if you need any further assistance.

Regards,

Vinitha