How to disable creating multiple appointments in the same cell

[victor]

Hi,
I am developing an online tennis booking application on an hourly basis, so I set the Scheduler as follows:
        .......
        .TimeScale(f => f.minorSlotCount(1).majorSlot(60).minorSlotTemplateId(null).majorSlotTemplateId(null))

I have two issues to cope with:
1).
On the Week tab, when I navigate clicking the dateTimePicker,  the height of the appointment cells shrinks while the hour cell heights remain the same. To reallineate their heights again, I have to click some other tab - Day, Month, etc and then the Week tab again.

2).
I saw that the appointment width is smaller the that of the cell containing it. If the remaining part is clicked, that allows creating of another appointment in the same cell, which I'd like to disable.

Thank you,
Victor Ghero

[victor]

It's me again - Victor Ghero- with regards of the first issue:
I tested your Time Scale Demo Scheule and it works fine, but the difference is that while yours works with 24 hours set, mine has  .StartHour(8) and .EndHour(22)

[Karthigeyan Krishnamurthi]

Hi Victor,   

   

Thank you for contacting Syncfusion support.   

   

Please find the following responses for your queries.   

   

Query1:  Height of the appointment cells shrinks   

   

We have checked your scenario and unable to reproduce the reported issue at our end and instead of that, cells are misaligned initially as shown in the below image.  We request you to conform whether this kind of issue is facing at your end?   

 

 

 

Query2: Single appointment in single cell   

   

Kindly include the below CSS class in your project to avoid multiple creation of an appointment in a single cell. We have prepared a sample for your reference which can be viewed from the below location:   

http://jsplayground.syncfusion.com/3l1noxhi   

 

<Code> 

<style> 

.e-appointment { 

            width: 100% !important; 

       } 

    </style> 

</Code> 

Regards, 

Karthigeyan 

[victor]

Hi,
First of all I'd like to thank you for your support. I really appreciate it.

For the first issue, cell disalignment, I copied below the Schedule settings:
    <div>
        @(Html.EJ().Schedule("Schedule1")
        .Width("100%")
        .Height("525px")
        .CurrentDate(new DateTime(DateTime.Now.Ticks))
        .TimeScale(f => f.minorSlotCount(1).majorSlot(60).minorSlotTemplateId(null).majorSlotTemplateId(null))
        .ShowQuickWindow(true)
        .StartHour(8)
        .EndHour(22)
        .TimeMode(TimeMode.Hour24)
        .ShowAllDayRow(false)
        .AllowDragDrop(false)
        .Locale("it-IT")
        .ShowCurrentTimeIndicator(true)
        .EnableAppointmentNavigation(false)
        .EnableAppointmentResize(false)
        .ShowDeleteConfirmationDialog(true)
        //.MinDate(new DateTime(DateTime.Now.Ticks))
        .AppointmentSettings(fields => fields.Datasource((IEnumerable)ViewBag.datasource)
            .Id("PrenotazioneId")
            .Subject("Subject")
            .StartTime("StartTime")
            .EndTime("EndTime")
            .Description("Description")
            .AllDay("AllDay")
            .Recurrence("Recurrence")
            .RecurrenceRule("RecurrenceRule")
            )
            .ScheduleClientSideEvents(evt =>
            evt.Create("onCreate")
            .CellClick("onCellClick")
            .AppointmentClick("onAppointmentClick")
            .CellDoubleClick("onCellDoubleClick")
            .AppointmentWindowOpen("onAppointmentWindowOpen")
            .BeforeAppointmentCreate("onBeforeAppointmentCreate")
            .BeforeAppointmentChange("onBeforeAppointmentChange")
            .BeforeAppointmentRemove("onBeforeAppointmentRemove")
            .AppointmentChanged("onAppointmentChanged")
            .AppointmentCreated("onAppointmentCreated")
            .AppointmentRemoved("onAppointmentRemoved")
            .Resize("onResize")
            .ResizeStart("onResize")
            .ResizeStop("onResize")
            .AppointmentHover("onAppointmentHover")
            )
        )
    </div>
<style>
    .disable {
        pointer-events: none;
        text-shadow: 0px 0px 0px #666;
        opacity: .8;
        color: transparent;
    }
</style>
.........

<script>
        ej.Schedule.Locale["it-IT"] = {
            ReminderWindowTitle: "Promemoria",
            CreateAppointmentTitle: "Crea prenotazione",
            RecurrenceEditTitle: "Cambia la ricorrenza",
            RecurrenceEditMessage: "Come vuoi cambiare la serie?",
            RecurrenceEditOnly: "Solo questa prenotazione",
            RecurrenceEditSeries: "Tutta la serie",
            PreviousAppointment: "Prenotazione precedente",
            NextAppointment: "Prenotazione successiva",
            AppointmentSubject: "Soggetto",
            StartTime: "Ora inizio",
            EndTime: "Ora fine",
            AllDay: "Giornata intera",
            Today: "Oggi",
            Recurrence: "Ricorrenza",
            Done: "Fatto",
            Cancel: "Annulla",
            Ok: "Ok",
            RepeatBy: "Ripetizione",
            RepeatEvery: "ripeti ogni",
            RepeatOn: "ripeti l'operazione per",
            StartsOn: "Inizia da",
            Ends: "Limiti",
            Summary: "Riassunto",
            Daily: "Quotidianamente",
            Weekly: "Settimanale",
            Monthly: "Mensile",
            Yearly: "Annuale",
            Every: "Tutte",
            EveryWeekDay: "Ogni giorno della settimana",
            Never: "Mai",
            After: "Dopo",
            Occurrence: "Occasione",
            On: "Per",
            Edit: "Modifica",
            RecurrenceDay: "Giorno (i)",
            RecurrenceWeek: "Settimana (i)",
            RecurrenceMonth: "Mese (i)",
            RecurrenceYear: "Anno (i)",
            The: "Il",
            OfEvery: "Per ogni",
            First: "Il primo",
            Second: "Secondo",
            Third: "Terzo",
            Fourth: "Quarto",
            Last: "Ultimo",
            WeekDay: "Giorno della settimana",
            WeekEndDay: "Giorno del week-end",
            Subject: "Soggetto",
            Categorize: "Categorie",
            DueIn: "Entro",
            DismissAll: "rejeter tout",
            Dismiss: "Abbandona",
            OpenItem: "Apri l'elemento",
            Snooze: "Riposo",
            Day: "Giorno",
            Week: "Settimana",
            WorkWeek: "Settimana lavorativa",
            Month: "Mese",
            AddEvent: "Aggiungi evento",
            CustomView: "Vista personalizzata",
            Agenda: "Agenda",
            Detailed: "Dettagli",
            EventBeginsin: "L'evento ha inizio dal",
            Editevent: "Modifica evento",
            Editseries: "Modifica serie",
            Times: "volte",
            Until: "Fino a",
            Eventwas: "APpuntamento era",
            Hours: "ore",
            Minutes: "minuti",
            Overdue: "Scaduto",
            Days: "Giorno (i)",
            Event: "Soggetto",
            Select: "Seleziona",
            Previous: "Precedente",
            Next: "Successivo",
            Close: "Chiudi",
            Delete: "Rimuovi",
            Date: "Data",
            Showin: "Visualizza entro",
            Gotodate: "Vai alla data",
            Resources: "RISORSE",
            RecurrenceDeleteTitle: "Elimina ripetizione evento-",
            Location: "Luogo",
            Priority: "Priorità",
            RecurrenceAlert: "Sveglia",
            WrongPattern: "Il criterio di ricorrenza non è valido",
            CreateError: "La durata dell'appuntamento inferiore a quanto si verifica frequentemente. Accorciare o modificare il criterio di ricorrenza nella finestra di dialogo Ricorrenza appuntamento.",
            DragResizeError: "Non è possibile riprogrammare un'occorrenza dell'appuntamento ricorrente se si salta su un evento successivo dello stesso appuntamento.",
            StartEndError: "L'ora di fine deve essere maggiore di quella di inizio",
            MouseOverDeleteTitle: "Cancellare un appuntamento-",
            DeleteConfirmation: "Cancellare questo appuntamento?",
            Time: "Tempo",
            StartTimeZone: "Inizio TimeZone",
            EndTimeZone: "Fine Timezone",
            NoTitle: "Senza titolo",
            OverFlowAppCount : "Troppi appuntamenti)",
            AppointmentIndicator: "Clicca per vedere più appuntamenti",
            EmptyResultText:"Senza suggerimenti"
        };

</script>

The first screen display is OK:

When I click on the DateTimePicker navigator, the screen become:


To get it realligned, I have to click on some other tab, and then again on Week (Settimana)

I hope that this helps. If you need something else, please let me know,

Victor Ghero

[Sellakumar]

Hi Victor,