B4J Question [ABMaterial] fullCalendar slotEventOverlap

[yiankos1]

Hello team,

I am using calendar (agendaWeek or agendaDay) in order to book some event slots a:

If I put three slots at the same hour i have this output in week or day view:

It does not overlaping normal as the official fullCalendar doc shows:

The problem that occurs with this overlaping, is that you can't drag or click a specific event, only the top one.

You can check the official behavior here. I am following documention v.3.0, as ABMaterial using this version.

Moreover, why there is not lines between hours?

Any ideas are welcome.

 

[yiankos1]

Edit ABMaterial source code and specific the ABMPage.java file:

Find these:

            if (this.NeedsCalendar) {
                writer.write(".full-calendar {padding-top: 30px;} ");
                writer.write("#external-events {padding-top: 50px;} ");
                writer.write("#external-events .fc-event {color: #fff;text-decoration: none;padding: 5px;margin-bottom: 10px;cursor: all-scroll;border: none;} ");
                writer.write(".fc button {background: #fff;} ");
                writer.write(".fc td, .fc th {border-width: 0px !important;} ");
                writer.write(".fc-today {opacity: 1; border: none;}");
                writer.write(".fc-time-grid-event.fc-v-event.fc-event {border-radius: 4px;border: 1px solid black !important; padding: 5px; opacity: 1}");
                writer.write(".fc td, .fc th {border-style: none !important; border-width: 1px !important; padding: 0 !important; vertical-align: top !important;}");
                writer.write(".fc-event .fc-bg {z-index: 1 !important; background: inherit !important; opacity: .25 !important;}");
                writer.write(".fc-ltr .fc-h-event.fc-not-end, .fc-rtl .fc-h-event.fc-not-start {opacity: .65 !important; margin-left: 12px !important;padding: 5px! important;}");
                writer.write(".fc-day-grid-event {opacity: .65 !important;margin-left: 12px !important;padding: 5px! important;}");
                writer.write("hr.fc-divider {border-color: transparent;background: transparent;border-width: 0px 0;}");
                writer.write(".fc-time-grid .fc-slats .fc-minor td {border-color: transparent;}");
                writer.write(".fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {border-color: transparent;}");
                writer.write(".fc-state-active, .fc-state-down {color: #3498db !important;}");
                writer.write(".fc-day-number {text-align: center;}");
                writer.write(".calnoselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  user-select: none;}");
            }

and change with these:

                writer.write(".full-calendar {padding-top: 30px;} ");
                writer.write("#external-events {padding-top: 50px;} ");
                writer.write("#external-events .fc-event {color: #fff; text-decoration: none; padding: 5px; margin-bottom: 10px; cursor: all-scroll; border: none;} ");
                writer.write(".fc button {background: #fff;} ");
                writer.write(".fc td, .fc th {border-width: 0 !important;} ");
                writer.write(".fc-today {opacity: 1; border: none;}");
                writer.write(".fc-time-grid-event.fc-v-event.fc-event {border-radius: 4px; border: 1px solid white !important; padding: 5px; opacity: 1}");
                writer.write(".fc-event .fc-bg {z-index: 1 !important; background: inherit !important; opacity: .25 !important;}");
                writer.write(".fc-ltr .fc-h-event.fc-not-end, .fc-rtl .fc-h-event.fc-not-start {opacity: .65 !important; margin-left: 12px !important; padding: 5px !important;}");
                writer.write(".fc-day-grid-event {opacity: .65 !important; margin-left: 12px !important; padding: 5px !important;}");
                writer.write(".calnoselect {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}");

                // General border styles for various elements
                writer.write(".fc td, .fc th {border: 1px solid #ddd !important;}");
                writer.write(".fc-time-grid .fc-slats td {border-top: 1px solid #ddd !important; border-bottom: none !important;}");
                writer.write(".fc-time-grid .fc-day-grid td {border-left: 1px solid #ddd !important;}");
                writer.write(".fc-time-grid .fc-day-grid td:first-child {border-left: none !important;}");
                writer.write(".fc-time-grid .fc-slats .fc-minor td {border-top: 1px dotted #ddd !important;}");
                writer.write(".fc-agenda-slots td {border-width: 1px 0 0 !important; background: none; opacity: 0.15 !important;}");
                writer.write(".fc-unthemed .fc-divider, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {border-color: transparent;}");

                // Add specific dividers for day names in different views
                writer.write(".fc-day-header {border: 1px solid #ddd !important; border-bottom: none !important;}");
                writer.write(".fc-head .fc-day-header {border: 1px solid #ddd !important;}");
                writer.write(".fc-view .fc-day-header {border: 1px solid #ddd !important;}");

                // Additional styles for month view
                writer.write(".fc-month-view .fc-day {padding: 5px !important;}");
                writer.write(".fc-month-view .fc-day-header {border-bottom: 1px solid #ddd !important;}");

Thank you @alwaysbusy for your assistance.