[TikiWiki-commits] [Git][tikiwiki/tiki][29.x] [REF] Update UI of calendar

luci pushed to branch 29.x at Tiki Wiki CMS Groupware / Tiki


Commits:
e5cba96b by franck franck kalunga at 2025-09-25T08:25:41+00:00
[REF] Update UI of calendar
---
* [REF] Update UI of calendar
---
* [REF] Update UI of calendar

See merge request tikiwiki/tiki!8427

See merge request tikiwiki/tiki!8641

- - - - -


5 changed files:

- src/js/jquery-tiki/tiki-calendar.js
- templates/calendar_header.tpl
- templates/export_calendar_in_csv_or_ical.tpl
- templates/tiki-calendar.tpl
- themes/base_files/scss/_tiki-calendar.scss


Changes:

=====================================
src/js/jquery-tiki/tiki-calendar.js
=====================================
@@ -21,7 +21,7 @@ $.fn.setupEventCalendar = function (eventCalendarParams) {
             headerToolbar: {
                 start: "prev,next today",
                 center: "title",
-                end: "dayGridMonth,timeGridWeek,timeGridDay,listDay,listWeek,listMonth,listYear",
+                end: "dayGridMonth,timeGridWeek,timeGridDay,listYear",
             },
             editable: true,
             selectable: true,
@@ -35,10 +35,7 @@ $.fn.setupEventCalendar = function (eventCalendarParams) {
                 dayGridMonth: tr("month"),
                 timeGridWeek: tr("week"),
                 timeGridDay: tr("day"),
-                listDay: tr("list day"),
-                listWeek: tr("list week"),
-                listMonth: tr("list month"),
-                listYear: tr("list year"),
+                listYear: tr("list"),
             },
             allDayContent: tr("all-day"),
             firstDay: eventCalendarParams.firstDayofWeek,
@@ -152,7 +149,6 @@ $.fn.setupEventCalendar = function (eventCalendarParams) {
                         textColor = "#000";
                     }
                     event.backgroundColor = backgroundColor;
-                    $(element).attr("style", "background-color: " + backgroundColor);
                     if (categoryBackgroundColor !== "") {
                         $(element).attr("style", "background-color: " + categoryBackgroundColor);
                     }


=====================================
templates/calendar_header.tpl
=====================================
@@ -13,15 +13,22 @@
 
 {* avoid Add Event being shown if no calendar is displayed *}
 {if $tiki_p_add_events eq 'y'}
-    <a href="{bootstrap_modal controller='calendar' action='edit_item' size='modal-lg' defaultCalendarId=$defaultCalendarId}" class="btn btn-primary">{icon name='create'} {tr}Add Event{/tr}</a>
+    <a {if $isInMainCalendar eq 'y'} style="display:block;"{/if} href="{bootstrap_modal controller='calendar' action='edit_item' size='modal-lg' defaultCalendarId=$defaultCalendarId}" class="btn btn-primary mt-2">{icon name='create'} {tr}Add Event{/tr}</a>
 {/if}
 
 {if $viewlist eq 'list'}
     {capture name=href}?viewlist=table{if !empty($smarty.request.todate)}&amp;todate={$smarty.request.todate}{/if}{/capture}
-    {button href=$smarty.capture.href _text='{tr}Calendar View{/tr}' _icon_name='calendar' _type='info'}
+    {if $isInMainCalendar eq 'y'}
+        {button _style="display: block;" _class="mt-2" href=$smarty.capture.href _text='{tr}Calendar View{/tr}' _icon_name='calendar' _type='info'}
+    {else}
+        {button _class="mt-2" href=$smarty.capture.href _text='{tr}Calendar View{/tr}' _icon_name='calendar' _type='info'}
+    {/if}
 {elseif $viewlist eq 'listEventView'}
-    {button href='tiki-calendar.php' _text='{tr}List View{/tr}' _icon_name='list' _type='info'}
+    {button _class="mt-2" href='tiki-calendar.php' _text='{tr}List View{/tr}' _icon_name='list' _type='info'}
 {else}
     {capture name=href}?viewlist=list{if !empty($smarty.request.todate)}&amp;todate={$smarty.request.todate}{/if}{/capture}
-    {button href=$smarty.capture.href _text='{tr}List View{/tr}' _icon_name='list' _type='info'}
+    
+    {if $isInMainCalendar neq 'y'}
+        {button _class="mt-2" href=$smarty.capture.href _text='{tr}List View{/tr}' _icon_name='list' _type='info'} 
+    {/if}
 {/if}


=====================================
templates/export_calendar_in_csv_or_ical.tpl
=====================================
@@ -1,5 +1,10 @@
 {if $tiki_p_view_events eq 'y' and $prefs.calendar_export eq 'y'}
-    {button href="#" _onclick="toggle('exportcal');return false;" _text='{tr}Export{/tr}' _icon_name='export' _type='info'}
+    {if $isInMainCalendar eq 'y'}
+        {button href="#" _onclick="toggle('exportcal');return false;" _text='{tr}Export{/tr}' _icon_name='export' _type='info' _style='display: block;'}
+    {else}
+        {button href="#" _onclick="toggle('exportcal');return false;" _text='{tr}Export{/tr}' _icon_name='export' _type='info'}
+    {/if}
+    
     <div class="d-inline-block">
         <form id="exportcal" class="card" method="post" action="tiki-calendar_export_ical.php" name="f" style="display:none;">
             <input type="hidden" name="export" value="y">


=====================================
templates/tiki-calendar.tpl
=====================================
@@ -54,71 +54,7 @@
                 </li>
             </ul>
         </div>
-        {include 
-            file='calendar_header.tpl'
-        }
-
-        {if count($calendars) >= 1}
-            {button href="#" _onclick="toggle('filtercal');return false;" _text='{tr}Calendars{/tr}' _icon_name='eye' _type='info'}
-            <div class="d-inline-block">
-                <form class="card" id="filtercal" method="get" action="{$myurl}" name="f" style="display:none;">
-                    <div class="card-header caltitle py-1 px-2">
-                        <strong>{tr}Calendars{/tr}</strong>
-                        <button type="button" class="btn-close float-end"  onclick="toggle('filtercal')" aria-hidden="true"></button>
-                    </div>
-                    <ul class="list-group list-group-flush list-unstyled mt-2">
-                        <li class="caltoggle">
-                            {select_all checkbox_names='calIds[]' label="{tr}Check / Uncheck All{/tr}"}
-                        </li>
-                        {foreach $calendars as $calendarId => $calendar}
-                            <li class="calcheckbox">
-                                <input type="checkbox" name="calIds[]" value="{$calendarId|escape}" id="groupcal_{$calendarId}"
-                                    {if in_array($calendarId, $displayedcals)}checked="checked"{/if}>
-                                <label for="groupcal_{$calendarId}" class="calId{$calendarId}">{$calendar.name|escape} ({tr}Id #{$calendarId}{/tr})</label>
-                            </li>
-                        {/foreach}
-                        <li class="calinput">
-                            <input type="hidden" name="todate" value="{$focusdate}">
-                            <input type="submit" class="btn btn-primary btn-sm" name="refresh" value="{tr}Refresh{/tr}">
-                        </li>
-                    </ul>
-                </form>
-                {jq}
-                    // handle calendar switcher form submit
-                    $("#filtercal").on("submit", function () {
-                        if ($("input[type=checkbox]:not(#clickall):not(:checked)", this).length === 0) {
-                            location.href = (jqueryTiki.sefurl ? "calendar" : "tiki-calendar.php") + "?allCals=y";
-                            return false;
-                        } else {
-                            return true;
-                        }
-                    });
-                {/jq}
-            </div>
-            {include file="export_calendar_in_csv_or_ical.tpl"}
-
-            <div id="configlinks" class="mb-3 text-end">
-                {if count($checkedCalIds)}
-                    {$maxCalsForButton = 20}
-                    {if count($checkedCalIds) > $maxCalsForButton}<select size="5">{/if}
-                    {foreach $checkedCalIds as $checkedCalId}
-                        {if $calendarId}
-                            {$thiscustombgcolor = $calendars[$checkedCalId].custombgcolor}
-                            {$thiscustomfgcolor = $calendars[$checkedCalId].customfgcolor}
-                            {$thiscalendarsname = $calendars[$checkedCalId].displayName|escape}
-                            {if count($checkedCalIds) > $maxCalsForButton}
-                                <option style="background:#{$thiscustombgcolor};color:#{$thiscustomfgcolor};" onclick="toggle('filtercal')">
-                                    {$thiscalendarsname}
-                                </option>
-                            {else}
-                                {button href="{$checkedCalId|sefurl:'calendar'}" _style="background:#$thiscustombgcolor;color:#$thiscustomfgcolor;border:1px solid #$thiscustomfgcolor;" _text="{$thiscalendarsname}" _class='btn btn-sm me-2'}
-                            {/if}
-                        {/if}
-                    {/foreach}
-                    {if count($checkedCalIds) > $maxCalsForButton}</select>{/if}
-                {/if}
-            </div>
-        {/if}
+        
         {if $nlg_availability}
             <div class="alert alert-info">
                 {$nlg_availability}
@@ -150,21 +86,95 @@
     {else}
         {$timeFormat=false}
     {/if}
-    {if $viewlist eq 'list'}
-        {include file='tiki-calendar_listmode.tpl'}
-    {else}
-        {jq}
-            $("#calendar").setupEventCalendar({{$eventCalendarParams|json_encode}});
-            {{if $prefs.print_pdf_from_url neq 'none'}$("#calendar").addEventCalendarPrint('#calendar-pdf-btn', calendar);{/if}}
-        {/jq}
-    {/if}
-    {if $pdf_export eq 'y' and $pdf_warning eq 'n'}
-        <a id="calendar-pdf-btn" href="#" class="text-end d-none" role="button">{icon name='pdf'} {tr}Export as PDF{/tr}</a>
-    {/if}
+    
     <div id="test"></div>
     
     <div id='currentcalitemId' class='d-none'>{$currentcalitemId}</div>
-    <div id='calendar'></div>
+    <div class='border border-secondary p-2 row'>
+        <div class='col-md-3 border-end border-secondary'>
+            {include 
+                file='calendar_header.tpl' isInMainCalendar="y"
+            }
+            {if count($calendars) >= 1}
+                {button _class="mt-2" _style="display: block;" href="#" _onclick="toggle('filtercal');return false;" _text='{tr}Calendars{/tr}' _icon_name='eye' _type='info'}
+                <div class="d-inline-block">
+                    <form class="card" id="filtercal" method="get" action="{$myurl}" name="f" style="display:none;">
+                        <div class="card-header caltitle py-1 px-2">
+                            <strong>{tr}Calendars{/tr}</strong>
+                            <button type="button" class="btn-close float-end"  onclick="toggle('filtercal')" aria-hidden="true"></button>
+                        </div>
+                        <ul class="list-group list-group-flush list-unstyled mt-2">
+                            <li class="caltoggle">
+                                {select_all checkbox_names='calIds[]' label="{tr}Check / Uncheck All{/tr}"}
+                            </li>
+                            {foreach $calendars as $calendarId => $calendar}
+                                <li class="calcheckbox">
+                                    <input type="checkbox" name="calIds[]" value="{$calendarId|escape}" id="groupcal_{$calendarId}"
+                                        {if in_array($calendarId, $displayedcals)}checked="checked"{/if}>
+                                    <label for="groupcal_{$calendarId}" class="calId{$calendarId}">{$calendar.name|escape} ({tr}Id #{$calendarId}{/tr})</label>
+                                </li>
+                            {/foreach}
+                            <li class="calinput">
+                                <input type="hidden" name="todate" value="{$focusdate}">
+                                <input type="submit" class="btn btn-primary btn-sm" name="refresh" value="{tr}Refresh{/tr}">
+                            </li>
+                        </ul>
+                    </form>
+                    {jq}
+                        // handle calendar switcher form submit
+                        $("#filtercal").on("submit", function () {
+                            if ($("input[type=checkbox]:not(#clickall):not(:checked)", this).length === 0) {
+                                location.href = (jqueryTiki.sefurl ? "calendar" : "tiki-calendar.php") + "?allCals=y";
+                                return false;
+                            } else {
+                                return true;
+                            }
+                        });
+                    {/jq}
+                </div>
+                {include file="export_calendar_in_csv_or_ical.tpl" isInMainCalendar="y"}
+                <h5 class="text-center text-secondary border-top border-bottom">
+                {tr}Displayed calendar{/tr}
+                <h5>
+                <div id="configlinks" class="mb-3 text-end">
+                    {if count($checkedCalIds)}
+                        {$maxCalsForButton = 20}
+                        {if count($checkedCalIds) > $maxCalsForButton}<select size="5">{/if}
+                        {foreach $checkedCalIds as $checkedCalId}
+                            {if $calendarId}
+                                {$thiscustombgcolor = $calendars[$checkedCalId].custombgcolor}
+                                {$thiscustomfgcolor = $calendars[$checkedCalId].customfgcolor}
+                                {$thiscalendarsname = $calendars[$checkedCalId].displayName|escape}
+                                {if count($checkedCalIds) > $maxCalsForButton}
+                                    <option style="background:#{$thiscustombgcolor};color:#{$thiscustomfgcolor};" onclick="toggle('filtercal')">
+                                        {$thiscalendarsname}
+                                    </option>
+                                {else}
+                                    {button href="{$checkedCalId|sefurl:'calendar'}" _style="background:#$thiscustombgcolor;color:#$thiscustomfgcolor;border:1px solid #$thiscustomfgcolor; display: block;" _text="{$thiscalendarsname}" _class='btn btn-sm me-2 mt-2' _icon_name='calendar'}
+                                {/if}
+                            {/if}
+                        {/foreach}
+                        {if count($checkedCalIds) > $maxCalsForButton}</select>{/if}
+                    {/if}
+                </div>
+            {/if}
+        </div>
+        <div class='col-md-9'>
+            {if $viewlist eq 'list'}
+                {include file='tiki-calendar_listmode.tpl'}
+            {else}
+                {jq}
+                    $("#calendar").setupEventCalendar({{$eventCalendarParams|json_encode}});
+                    {{if $prefs.print_pdf_from_url neq 'none'}$("#calendar").addEventCalendarPrint('#calendar-pdf-btn', calendar);{/if}}
+                {/jq}
+            {/if}
+            {if $pdf_export eq 'y' and $pdf_warning eq 'n'}
+                <a id="calendar-pdf-btn" href="#" class="text-end d-none" role="button">{icon name='pdf'} {tr}Export as PDF{/tr}</a>
+            {/if}
+            <div id='calendar'></div>
+        </div>
+        
+    </div>
 </div>
 {if $prefs.feature_jscalendar eq 'y'}
     {js_insert_icon type="jscalendar"}


=====================================
themes/base_files/scss/_tiki-calendar.scss
=====================================
@@ -68,33 +68,11 @@
         background-color: #dfdfdf;
     }
 }
-
-h4.ec-day-head {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-
 .ec-day-head {
-    height: 1.4rem;
-    width: 1.4rem;
     font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    margin: 5px 5px 0px 0px;
-    border-radius: 50%;
-    transition: background-color 0.3s ease, color 0.3s ease;
-
-    &:hover {
-        background-color: #1977db;
-        color: #fff;           
-        cursor: pointer;
-    }
 }
 
-.ec-semester-view .ec-day-head, .ec-quarter-view .ec-day-head {
+.ec-semester-view , .ec-quarter-view {
     width: fit-content;
     border-radius: 8px;
 }



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/e5cba96b0c55c3702e6761e1d4eb0344a85b81fb

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/e5cba96b0c55c3702e6761e1d4eb0344a85b81fb
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs