Agenda view updates for events.
authorSteve Sutton <steve@gaslightmedia.com>
Fri, 5 Apr 2019 19:48:27 +0000 (15:48 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Fri, 5 Apr 2019 19:48:27 +0000 (15:48 -0400)
Agenda Views:
Setup agendaScript.html to have all the javascript.
Use template variable so parts of script can be custom per agenda view.
Add Read More button to lower right of the event.

views/front/events/agenda.html
views/front/events/agendaScript.html [new file with mode: 0644]
views/front/events/agendaScript2.html [new file with mode: 0644]
views/front/events/agenda_new.html

index 75a1310..971b1b8 100644 (file)
     </div>
 </div>
 
+{* Set agenda view name *}
+{$agendaViewName = 'old'}
 
-
-<script type="text/javascript">
-    jQuery(document).ready(function($) {
-
-        var fullCalendarLoaded  = false;
-        var recurrencesInited   = false;
-        var locationsInited     = false;
-        var table               = 'glm-table-calendar';
-        var post_start, post_end, month_obj;
-        var rows                = $(".glm-event-day-row");
-        var agenda              = $("#glm-event-agenda-view");
-        var view_select         = $("#glm-event-view-select");
-        var search              = $("#glm-events-search-form");
-        var calendar            = $("#eventCalendar");
-        var event_search        = $(".glm-search-icon");
-        var main_content        = $("#main-content");
-        var member_id           = '{$memberId}';
-        var view                = '{$cal_view}';
-        var months              = '{$json_months}';
-        var category            = $('#glm-event-category').val();
-        var current_month       = $('{$current_month}');
-        var current_year        = $('{$current_year}');
-        var custom_page         = '{$customPage}';
-        var page_slug           = '{$pageSlug}';
-        var retain_date;
-
-        if(!member_id){
-            member_id = null;
-        }
-
-        // add 7 days to ensure we always get the current month and not any other month view that may
-        // be visible (last few days of previous month or first few days of next month)
-        function get_current_view(){
-            var retain_date;
-            var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
-            var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
-
-            return retain_date = d;
-        }
-        function in_mobile(){
-            if($(window).width() < 641 ){
-                return true;
-            } else {
-                return false;
-            }
-        }
-
-        $('#glm-event-from').on("change", function(){
-            var from_date = $(this).val();
-            $('#glm-event-to').val(from_date);
-
-        });
-
-        months = JSON.parse(months);
-
-        event_search.on('click', function(){
-            sessionStorage.override = 'yes';
-        });
-
-        if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
-            view = sessionStorage.view;
-        } else if( sessionStorage.override === 'yes' || in_mobile()){
-            view = 'agenda';
-        }
-
-        // AJAX FUNCTION ************************************************
-        // Get calendar month via AJAX
-        function eventsCalMonthAJAX(month) {
-            var dat = {
-
-                action: 'glm_members_admin_ajax',
-                glm_action: 'eventsCalMonthAJAX',
-                month: month,
-                category: category,
-                member_id: member_id,
-                custom_page: custom_page,
-                page_slug: page_slug
-            };
-            $('.fc-event').remove();
-
-             jQuery.ajax({
-                type: 'POST',
-                url: '{$ajaxUrl}',
-                data: dat,
-                beforeSend: function(){
-                    $(".event-overlay").show();
-                    $(".loading").show();
-                },
-                complete: function(){
-                    $(".event-overlay").hide();
-                    $(".loading").hide();
-                },
-                cache: false,
-                success: function (response){
-                    var buildingEvents = [];
-                    //var events_obj = jQuery.parseJSON(response);
-                    var events_obj = response;
-                    var events = events_obj.events;
-                    buildingEvents = $.map(events, function(i, val) {
-                        return {
-                            title:   i.title,
-                            start:   i.start,
-                            end:     i.last,
-                            allDay:  i.all_day,
-                            url:     i.url,
-                            recurs:  i.recurs
-                        };
-                    });
-                    $("#eventCalendar").fullCalendar('removeEvents');
-                    $("#eventCalendar").fullCalendar('addEventSource', buildingEvents);
-                }
-            });
-            var timestamp = $.now();
-            var url = '{$ajaxUrl}' + '?t=' + timestamp;
-        }
-        var height = 900;
-        // Calendar *****************************************************
-        $('#eventCalendar').fullCalendar({
-            eventOrder: 'allDay',
-            height: height,
-            contentHeight: height,
-            eventRender: function(event, element){
-                element.attr('title', event.title);
-            },
-            viewRender: function (view, element){
-                post_start = view.start._d;
-                post_end = view.end._d;
-                {literal}month_obj = {start: view.start._d, last: view.end._d};{/literal}
-            },
-            header: {
-                left: 'prev,next,today',
-                center: 'title',
-                right: ''
-            },
-            dayClick: function(date, jsEvent, view) {
-                //$('#eventCalendar').fullCalendar('changeView', 'agendaDay');
-                //$('#eventCalendar').fullCalendar('gotoDate', date);
-            },
-            editable: false,
-            handleWindowResize: true,
-            lazyFetching: true,
-            eventClick : function (event){
-
-                sessionStorage.current_calendar_view = get_current_view();
-
-
-                if(custom_page !== ''){
-                    location.href = event.url + '&glm_event_from=' + event.start.format();
-                } else {
-                    location.href = event.url + '?glm_event_from=' + event.start.format();
-                }
-
-                return false;
-            },
-            eventLimit: true,
-            views: {
-                month: {
-                    eventLimit: 4,
-                    eventBackgroundColor: 'transparent',
-                    eventTextColor: '#3A87AD',
-                    eventBorderColor: 'transparent',
-                },
-                agenda: {
-                    eventLimit: 4
-                }
-            }
-        });
-
-        if(view === "calendar"){
-            eventsCalMonthAJAX(month_obj);
-            main_content.removeClass("glma-small-8").addClass("glma-small-12");
-            calendar.show();
-            view_select.val('calendar');
-
-        } else if ( view === "agenda"){
-            calendar.hide();
-            agenda.css("display", "block");
-            view_select.val('agenda');
-        }
-        $("#glm-event-view-select").on("change", function (){
-            sessionStorage.override = 'no';
-            sessionStorage.setItem("view", $(this).attr("value"));
-            if($("#glm-event-view-select option:selected").val() === "calendar"){
-                eventsCalMonthAJAX(month_obj);
-                agenda.css("display","none");
-                calendar.fadeIn('slow', function(){});
-                calendar.fullCalendar('render');
-
-            } else if ( $("#glm-event-view-select option:selected").val() === "agenda"){
-                agenda.css("display", "block");
-                calendar.fadeOut('slow', function(){});
-            }
-        });
-        $(window).on("load", function(){
-
-            if(sessionStorage.current_calendar_view){
-                $('#event-date-toggle option').each(function(){
-                    if( $(this).val() === sessionStorage.current_calendar_view){
-                        $(this).prop('selected', true);
-                    }
-                });
-            }
-
-            $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
-
-            $('#event-date-toggle').on("change", function(){
-                var selected_date = $(this).val();
-
-                $('#eventCalendar').fullCalendar('gotoDate', selected_date);
-                 eventsCalMonthAJAX(month_obj);
-                 if(sessionStorage.current_calendar_view){
-                    sessionStorage.current_calendar_view = '';
-                }
-            });
-        });
-        if(sessionStorage.current_calendar_view){
-             $('#eventCalendar').fullCalendar('gotoDate', sessionStorage.current_calendar_view);
-             eventsCalMonthAJAX(month_obj);
-        }
-        // initialize calendar with AJAX calls *************************************
-        $(document).on("click", "button.fc-button", function () {
-            if(sessionStorage.current_calendar_view){
-                sessionStorage.current_calendar_view = '';
-            }
-
-            eventsCalMonthAJAX(month_obj);
-        });
-
-       $('#eventCalendar').find('.fc-today-button').on("click", function(){
-           eventsCalMonthAJAX(month_obj);
-           var current_view = get_current_view();
-           $('#event-date-toggle option').each(function(){
-                if( $(this).val() === current_view){
-                    $(this).prop('selected', true);
-                }
-            });
-       });
-
-        var dates = $(".agenda-event-recur-dates");
-        dates.each( function (){
-           if( $(this).text().indexOf('-') < 0 ){
-               $(this).remove();
-           }
-        });
-
-    });
-</script>
+{include file='front/events/agendaScript.html'}
diff --git a/views/front/events/agendaScript.html b/views/front/events/agendaScript.html
new file mode 100644 (file)
index 0000000..bdcaa98
--- /dev/null
@@ -0,0 +1,254 @@
+<script>
+jQuery(document).ready(function($) {
+
+    var fullCalendarLoaded  = false;
+    var recurrencesInited   = false;
+    var locationsInited     = false;
+    var table               = 'glm-table-calendar';
+    var post_start, post_end, month_obj;
+    var rows                = $(".glm-event-day-row");
+    var agenda              = $("#glm-event-agenda-view");
+    var view_select         = $("#glm-event-view-select");
+    var search              = $("#glm-events-search-form");
+    var calendar            = $("#eventCalendar");
+    var event_search        = $(".glm-search-icon");
+    var main_content        = $("#main-content");
+    var member_id           = '{$memberId}';
+    var view                = '{$cal_view}';
+    var months              = '{$json_months}';
+    var category            = $('#glm-event-category').val();
+    var current_month       = $('{$current_month}');
+    var current_year        = $('{$current_year}');
+    var custom_page         = '{$customPage}';
+    var page_slug           = '{$pageSlug}';
+    var retain_date;
+
+    if(!member_id){
+        member_id = null;
+    }
+
+    // add 7 days to ensure we always get the current month and not any other month view that may
+    // be visible (last few days of previous month or first few days of next month)
+    function get_current_view(){
+        var retain_date;
+        var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
+        var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
+
+        return retain_date = d;
+    }
+    function in_mobile(){
+        if($(window).width() < 641 ){
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    $('#glm-event-from').on("change", function(){
+        var from_date = $(this).val();
+        $('#glm-event-to').val(from_date);
+
+    });
+
+    months = JSON.parse(months);
+
+    event_search.on('click', function(){
+        sessionStorage.override = 'yes';
+    });
+
+    if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
+        view = sessionStorage.view;
+    } else if( sessionStorage.override === 'yes' || in_mobile()){
+        view = 'agenda';
+    }
+
+    // AJAX FUNCTION ************************************************
+    // Get calendar month via AJAX
+    function eventsCalMonthAJAX(month) {
+        var dat = {
+
+            action: 'glm_members_admin_ajax',
+            glm_action: 'eventsCalMonthAJAX',
+            month: month,
+            category: category,
+            member_id: member_id,
+            custom_page: custom_page,
+            page_slug: page_slug
+        };
+        $('.fc-event').remove();
+
+         jQuery.ajax({
+            type: 'POST',
+            url: '{$ajaxUrl}',
+            data: dat,
+            beforeSend: function(){
+                $(".event-overlay").show();
+                $(".loading").show();
+            },
+            complete: function(){
+                $(".event-overlay").hide();
+                $(".loading").hide();
+            },
+            cache: false,
+            success: function (response){
+                var buildingEvents = [];
+                //var events_obj = jQuery.parseJSON(response);
+                var events_obj = response;
+                var events = events_obj.events;
+                buildingEvents = $.map(events, function(i, val) {
+                    return {
+                        title:   i.title,
+                        start:   i.start,
+                        end:     i.last,
+                        allDay:  i.all_day,
+                        url:     i.url,
+                        recurs:  i.recurs
+                    };
+                });
+                $("#eventCalendar").fullCalendar('removeEvents');
+                $("#eventCalendar").fullCalendar('addEventSource', buildingEvents);
+            }
+        });
+        var timestamp = $.now();
+        var url = '{$ajaxUrl}' + '?t=' + timestamp;
+    }
+    var height = 900;
+    // Calendar *****************************************************
+    $('#eventCalendar').fullCalendar({
+        eventOrder: 'allDay',
+        height: height,
+        contentHeight: height,
+        eventRender: function(event, element){
+            element.attr('title', event.title);
+        },
+        viewRender: function (view, element){
+            post_start = view.start._d;
+            post_end = view.end._d;
+            {literal}month_obj = {start: view.start._d, last: view.end._d};{/literal}
+        },
+        header: {
+            left: 'prev,next,today',
+            center: 'title',
+            right: ''
+        },
+        dayClick: function(date, jsEvent, view) {
+            //$('#eventCalendar').fullCalendar('changeView', 'agendaDay');
+            //$('#eventCalendar').fullCalendar('gotoDate', date);
+        },
+        editable: false,
+        handleWindowResize: true,
+        lazyFetching: true,
+        eventClick : function (event){
+
+            sessionStorage.current_calendar_view = get_current_view();
+
+
+            if(custom_page !== ''){
+                location.href = event.url + '&glm_event_from=' + event.start.format();
+            } else {
+                location.href = event.url + '?glm_event_from=' + event.start.format();
+            }
+
+            return false;
+        },
+        eventLimit: true,
+        views: {
+            month: {
+                eventLimit: 4,
+                eventBackgroundColor: 'transparent',
+                eventTextColor: '#3A87AD',
+                eventBorderColor: 'transparent',
+            },
+            agenda: {
+                eventLimit: 4
+            }
+        }
+    });
+
+    if(view === "calendar"){
+        eventsCalMonthAJAX(month_obj);
+        main_content.removeClass("glma-small-8").addClass("glma-small-12");
+        calendar.show();
+        view_select.val('calendar');
+
+    } else if ( view === "agenda"){
+        calendar.hide();
+        agenda.css("display", "block");
+        view_select.val('agenda');
+    }
+    $("#glm-event-view-select").on("change", function (){
+        sessionStorage.override = 'no';
+        sessionStorage.setItem("view", $(this).attr("value"));
+        if($("#glm-event-view-select option:selected").val() === "calendar"){
+            eventsCalMonthAJAX(month_obj);
+            agenda.css("display","none");
+            calendar.fadeIn('slow', function(){});
+            calendar.fullCalendar('render');
+
+        } else if ( $("#glm-event-view-select option:selected").val() === "agenda"){
+            agenda.css("display", "block");
+            calendar.fadeOut('slow', function(){});
+        }
+    });
+    $(window).on("load", function(){
+
+        if(sessionStorage.current_calendar_view){
+            $('#event-date-toggle option').each(function(){
+                if( $(this).val() === sessionStorage.current_calendar_view){
+                    $(this).prop('selected', true);
+                }
+            });
+        }
+
+        $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
+
+        $('#event-date-toggle').on("change", function(){
+            var selected_date = $(this).val();
+
+            $('#eventCalendar').fullCalendar('gotoDate', selected_date);
+             eventsCalMonthAJAX(month_obj);
+             if(sessionStorage.current_calendar_view){
+                sessionStorage.current_calendar_view = '';
+            }
+        });
+    });
+    if(sessionStorage.current_calendar_view){
+         $('#eventCalendar').fullCalendar('gotoDate', sessionStorage.current_calendar_view);
+         eventsCalMonthAJAX(month_obj);
+    }
+    // initialize calendar with AJAX calls *************************************
+    $(document).on("click", "button.fc-button", function () {
+        if(sessionStorage.current_calendar_view){
+            sessionStorage.current_calendar_view = '';
+        }
+
+        eventsCalMonthAJAX(month_obj);
+    });
+
+   $('#eventCalendar').find('.fc-today-button').on("click", function(){
+       eventsCalMonthAJAX(month_obj);
+       var current_view = get_current_view();
+       $('#event-date-toggle option').each(function(){
+            if( $(this).val() === current_view){
+                $(this).prop('selected', true);
+            }
+        });
+   });
+
+    var dates = $(".agenda-event-recur-dates");
+    dates.each( function (){
+       if( $(this).text().indexOf('-') < 0 ){
+           $(this).remove();
+       }
+    });
+
+    {if $agendaViewName == 'new'}
+        // Event agenda view container click, go to event url
+        $('.glm-event-day-event').on("click", function(){
+            window.location = $(this).data('url');
+        });
+    {/if}
+
+
+});
+</script>
diff --git a/views/front/events/agendaScript2.html b/views/front/events/agendaScript2.html
new file mode 100644 (file)
index 0000000..fab4cff
--- /dev/null
@@ -0,0 +1,246 @@
+<script type="text/javascript">
+    jQuery(document).ready(function($) {
+
+        var fullCalendarLoaded  = false;
+        var recurrencesInited   = false;
+        var locationsInited     = false;
+        var table               = 'glm-table-calendar';
+        var post_start, post_end, month_obj;
+        var rows                = $(".glm-event-day-row");
+        var agenda              = $("#glm-event-agenda-view");
+        var view_select         = $("#glm-event-view-select");
+        var search              = $("#glm-events-search-form");
+        var calendar            = $("#eventCalendar");
+        var event_search        = $(".glm-search-icon");
+        var main_content        = $("#main-content");
+        var member_id           = '{$memberId}';
+        var view                = '{$cal_view}';
+        var months              = '{$json_months}';
+        var category            = $('#glm-event-category').val();
+        var current_month       = $('{$current_month}');
+        var current_year        = $('{$current_year}');
+        var custom_page         = '{$customPage}';
+        var page_slug           = '{$pageSlug}';
+        var retain_date;
+
+        if(!member_id){
+            member_id = null;
+        }
+
+        // add 7 days to ensure we always get the current month and not any other month view that may
+        // be visible (last few days of previous month or first few days of next month)
+        function get_current_view(){
+            var retain_date;
+            var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
+            var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
+
+            return retain_date = d;
+        }
+        function in_mobile(){
+            if($(window).width() < 641 ){
+                return true;
+            } else {
+                return false;
+            }
+        }
+
+        $('#glm-event-from').on("change", function(){
+            var from_date = $(this).val();
+            $('#glm-event-to').val(from_date);
+
+        });
+
+        months = JSON.parse(months);
+
+        event_search.on('click', function(){
+            sessionStorage.override = 'yes';
+        });
+
+        if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
+            view = sessionStorage.view;
+        } else if( sessionStorage.override === 'yes' || in_mobile()){
+            view = 'agenda';
+        }
+
+        // AJAX FUNCTION ************************************************
+        // Get calendar month via AJAX
+        function eventsCalMonthAJAX(month) {
+            var dat = {
+
+                action: 'glm_members_admin_ajax',
+                glm_action: 'eventsCalMonthAJAX',
+                month: month,
+                category: category,
+                member_id: member_id,
+                custom_page: custom_page,
+                page_slug: page_slug
+            };
+            $('.fc-event').remove();
+
+             jQuery.ajax({
+                type: 'POST',
+                url: '{$ajaxUrl}',
+                data: dat,
+                beforeSend: function(){
+                    $(".event-overlay").show();
+                    $(".loading").show();
+                },
+                complete: function(){
+                    $(".event-overlay").hide();
+                    $(".loading").hide();
+                },
+                cache: false,
+                success: function (response){
+                    var buildingEvents = [];
+                    //var events_obj = jQuery.parseJSON(response);
+                    var events_obj = response;
+                    var events = events_obj.events;
+                    buildingEvents = $.map(events, function(i, val) {
+                        return {
+                            title:   i.title,
+                            start:   i.start,
+                            end:     i.last,
+                            allDay:  i.all_day,
+                            url:     i.url,
+                            recurs:  i.recurs
+                        };
+                    });
+                    $("#eventCalendar").fullCalendar('removeEvents');
+                    $("#eventCalendar").fullCalendar('addEventSource', buildingEvents);
+                }
+            });
+            var timestamp = $.now();
+            var url = '{$ajaxUrl}' + '?t=' + timestamp;
+        }
+        var height = 900;
+        // Calendar *****************************************************
+        $('#eventCalendar').fullCalendar({
+            eventOrder: 'allDay',
+            height: height,
+            contentHeight: height,
+            eventRender: function(event, element){
+                element.attr('title', event.title);
+            },
+            viewRender: function (view, element){
+                post_start = view.start._d;
+                post_end = view.end._d;
+                {literal}month_obj = {start: view.start._d, last: view.end._d};{/literal}
+            },
+            header: {
+                left: 'prev,next,today',
+                center: 'title',
+                right: ''
+            },
+            dayClick: function(date, jsEvent, view) {
+                //$('#eventCalendar').fullCalendar('changeView', 'agendaDay');
+                //$('#eventCalendar').fullCalendar('gotoDate', date);
+            },
+            editable: false,
+            handleWindowResize: true,
+            lazyFetching: true,
+            eventClick : function (event){
+
+                sessionStorage.current_calendar_view = get_current_view();
+
+
+                if(custom_page !== ''){
+                    location.href = event.url + '&glm_event_from=' + event.start.format();
+                } else {
+                    location.href = event.url + '?glm_event_from=' + event.start.format();
+                }
+
+                return false;
+            },
+            eventLimit: true,
+            views: {
+                month: {
+                    eventLimit: 4,
+                    eventBackgroundColor: 'transparent',
+                    eventTextColor: '#3A87AD',
+                    eventBorderColor: 'transparent',
+                },
+                agenda: {
+                    eventLimit: 4
+                }
+            }
+        });
+
+        if(view === "calendar"){
+            eventsCalMonthAJAX(month_obj);
+            main_content.removeClass("glma-small-8").addClass("glma-small-12");
+            calendar.show();
+            view_select.val('calendar');
+
+        } else if ( view === "agenda"){
+            calendar.hide();
+            agenda.css("display", "block");
+            view_select.val('agenda');
+        }
+        $("#glm-event-view-select").on("change", function (){
+            sessionStorage.override = 'no';
+            sessionStorage.setItem("view", $(this).attr("value"));
+            if($("#glm-event-view-select option:selected").val() === "calendar"){
+                eventsCalMonthAJAX(month_obj);
+                agenda.css("display","none");
+                calendar.fadeIn('slow', function(){});
+                calendar.fullCalendar('render');
+
+            } else if ( $("#glm-event-view-select option:selected").val() === "agenda"){
+                agenda.css("display", "block");
+                calendar.fadeOut('slow', function(){});
+            }
+        });
+        $(window).on("load", function(){
+
+            if(sessionStorage.current_calendar_view){
+                $('#event-date-toggle option').each(function(){
+                    if( $(this).val() === sessionStorage.current_calendar_view){
+                        $(this).prop('selected', true);
+                    }
+                });
+            }
+
+            $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
+
+            $('#event-date-toggle').on("change", function(){
+                var selected_date = $(this).val();
+
+                $('#eventCalendar').fullCalendar('gotoDate', selected_date);
+                 eventsCalMonthAJAX(month_obj);
+                 if(sessionStorage.current_calendar_view){
+                    sessionStorage.current_calendar_view = '';
+                }
+            });
+        });
+        if(sessionStorage.current_calendar_view){
+             $('#eventCalendar').fullCalendar('gotoDate', sessionStorage.current_calendar_view);
+             eventsCalMonthAJAX(month_obj);
+        }
+        // initialize calendar with AJAX calls *************************************
+        $(document).on("click", "button.fc-button", function () {
+            if(sessionStorage.current_calendar_view){
+                sessionStorage.current_calendar_view = '';
+            }
+
+            eventsCalMonthAJAX(month_obj);
+        });
+
+       $('#eventCalendar').find('.fc-today-button').on("click", function(){
+           eventsCalMonthAJAX(month_obj);
+           var current_view = get_current_view();
+           $('#event-date-toggle option').each(function(){
+                if( $(this).val() === current_view){
+                    $(this).prop('selected', true);
+                }
+            });
+       });
+
+        var dates = $(".agenda-event-recur-dates");
+        dates.each( function (){
+           if( $(this).text().indexOf('-') < 0 ){
+               $(this).remove();
+           }
+        });
+
+    });
+</script>
index 3c05997..9799a79 100644 (file)
 .glm-agenda-city {
     font-size: 13px;
 }
+a.glm-read-more {
+    border: 1px solid {if $settings.agenda_date_background_color}{$settings.agenda_date_background_color}{else}#37426E{/if} !important;
+
+    color: {if $settings.agenda_date_background_color}{$settings.agenda_date_background_color}{else}#37426E{/if} !important;
+    background-color: white;
+    transition: background-color 400ms ease-in-out;
+}
+a.glm-read-more:hover, a.event-read-more:hover {
+    background-color: {if $settings.agenda_date_background_color}{$settings.agenda_date_background_color}{else}#37426E{/if} !important;
+    color: white !important;
+}
 </style>
 
 <div id="glm-event-wrapper">
@@ -57,7 +68,7 @@
                                 {$showTime = true}
 
                                 <div class="glma-row glm-event-day-event{if $settings.sort_by_featured_in_agenda && $event.featured.value} glm-event-featured{/if}" data-url="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">
-                                    <div class="glma-small-12 {if $event.image}glma-large-8 {/if}glma-columns">
+                                    <div class="glma-small-12 {if $event.image}glma-large-9 {/if}glma-columns">
                                         <a class="glm-link" href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">
                                             <h2 class="agenda-event-name">{$event.name}</h2>
                                         </a>
                                         </div>
                                     </div>
                                     {if $event.image}
-                                    <div class="glma-small-12 glma-large-4 glma-columns glm-events-agenda-image">
+                                    <div class="glma-small-12 glma-large-3 glma-columns glm-events-agenda-image">
                                         <img class="" style="float:none;" src="{$imgUrl}{$event.image}">
                                     </div>
                                     {/if}
+
+                                    <div>
+                                        <a class="glm-read-more event-read-more" href="{$siteBaseUrl}{$pageSlug}/{if !$customPage}{$event.name_slug}/{else}?eventId={$event.id}{/if}">Read More</a>
+                                    </div>
+
                                 </div>
                             {/foreach}
                         {/foreach}
     </div>
 </div>
 
-<script>
-jQuery(document).ready(function($) {
-
-    var fullCalendarLoaded  = false;
-    var recurrencesInited   = false;
-    var locationsInited     = false;
-    var table               = 'glm-table-calendar';
-    var post_start, post_end, month_obj;
-    var rows                = $(".glm-event-day-row");
-    var agenda              = $("#glm-event-agenda-view");
-    var view_select         = $("#glm-event-view-select");
-    var search              = $("#glm-events-search-form");
-    var calendar            = $("#eventCalendar");
-    var event_search        = $(".glm-search-icon");
-    var main_content        = $("#main-content");
-    var member_id           = '{$memberId}';
-    var view                = '{$cal_view}';
-    var months              = '{$json_months}';
-    var category            = $('#glm-event-category').val();
-    var current_month       = $('{$current_month}');
-    var current_year        = $('{$current_year}');
-    var custom_page         = '{$customPage}';
-    var page_slug           = '{$pageSlug}';
-    var retain_date;
-
-    if(!member_id){
-        member_id = null;
-    }
-
-    // add 7 days to ensure we always get the current month and not any other month view that may
-    // be visible (last few days of previous month or first few days of next month)
-    function get_current_view(){
-        var retain_date;
-        var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
-        var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
-
-        return retain_date = d;
-    }
-    function in_mobile(){
-        if($(window).width() < 641 ){
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    $('#glm-event-from').on("change", function(){
-        var from_date = $(this).val();
-        $('#glm-event-to').val(from_date);
-
-    });
-
-    months = JSON.parse(months);
-
-    event_search.on('click', function(){
-        sessionStorage.override = 'yes';
-    });
-
-    if( sessionStorage.view && sessionStorage.override === 'no' && !in_mobile()){
-        view = sessionStorage.view;
-    } else if( sessionStorage.override === 'yes' || in_mobile()){
-        view = 'agenda';
-    }
-
-    // AJAX FUNCTION ************************************************
-    // Get calendar month via AJAX
-    function eventsCalMonthAJAX(month) {
-        var dat = {
-
-            action: 'glm_members_admin_ajax',
-            glm_action: 'eventsCalMonthAJAX',
-            month: month,
-            category: category,
-            member_id: member_id,
-            custom_page: custom_page,
-            page_slug: page_slug
-        };
-        $('.fc-event').remove();
-
-         jQuery.ajax({
-            type: 'POST',
-            url: '{$ajaxUrl}',
-            data: dat,
-            beforeSend: function(){
-                $(".event-overlay").show();
-                $(".loading").show();
-            },
-            complete: function(){
-                $(".event-overlay").hide();
-                $(".loading").hide();
-            },
-            cache: false,
-            success: function (response){
-                var buildingEvents = [];
-                //var events_obj = jQuery.parseJSON(response);
-                var events_obj = response;
-                var events = events_obj.events;
-                buildingEvents = $.map(events, function(i, val) {
-                    return {
-                        title:   i.title,
-                        start:   i.start,
-                        end:     i.last,
-                        allDay:  i.all_day,
-                        url:     i.url,
-                        recurs:  i.recurs
-                    };
-                });
-                $("#eventCalendar").fullCalendar('removeEvents');
-                $("#eventCalendar").fullCalendar('addEventSource', buildingEvents);
-            }
-        });
-        var timestamp = $.now();
-        var url = '{$ajaxUrl}' + '?t=' + timestamp;
-    }
-    var height = 900;
-    // Calendar *****************************************************
-    $('#eventCalendar').fullCalendar({
-        eventOrder: 'allDay',
-        height: height,
-        contentHeight: height,
-        eventRender: function(event, element){
-            element.attr('title', event.title);
-        },
-        viewRender: function (view, element){
-            post_start = view.start._d;
-            post_end = view.end._d;
-            {literal}month_obj = {start: view.start._d, last: view.end._d};{/literal}
-        },
-        header: {
-            left: 'prev,next,today',
-            center: 'title',
-            right: ''
-        },
-        dayClick: function(date, jsEvent, view) {
-            //$('#eventCalendar').fullCalendar('changeView', 'agendaDay');
-            //$('#eventCalendar').fullCalendar('gotoDate', date);
-        },
-        editable: false,
-        handleWindowResize: true,
-        lazyFetching: true,
-        eventClick : function (event){
-
-            sessionStorage.current_calendar_view = get_current_view();
-
-
-            if(custom_page !== ''){
-                location.href = event.url + '&glm_event_from=' + event.start.format();
-            } else {
-                location.href = event.url + '?glm_event_from=' + event.start.format();
-            }
-
-            return false;
-        },
-        eventLimit: true,
-        views: {
-            month: {
-                eventLimit: 4,
-                eventBackgroundColor: 'transparent',
-                eventTextColor: '#3A87AD',
-                eventBorderColor: 'transparent',
-            },
-            agenda: {
-                eventLimit: 4
-            }
-        }
-    });
-
-    if(view === "calendar"){
-        eventsCalMonthAJAX(month_obj);
-        main_content.removeClass("glma-small-8").addClass("glma-small-12");
-        calendar.show();
-        view_select.val('calendar');
-
-    } else if ( view === "agenda"){
-        calendar.hide();
-        agenda.css("display", "block");
-        view_select.val('agenda');
-    }
-    $("#glm-event-view-select").on("change", function (){
-        sessionStorage.override = 'no';
-        sessionStorage.setItem("view", $(this).attr("value"));
-        if($("#glm-event-view-select option:selected").val() === "calendar"){
-            eventsCalMonthAJAX(month_obj);
-            agenda.css("display","none");
-            calendar.fadeIn('slow', function(){});
-            calendar.fullCalendar('render');
-
-        } else if ( $("#glm-event-view-select option:selected").val() === "agenda"){
-            agenda.css("display", "block");
-            calendar.fadeOut('slow', function(){});
-        }
-    });
-    $(window).on("load", function(){
-
-        if(sessionStorage.current_calendar_view){
-            $('#event-date-toggle option').each(function(){
-                if( $(this).val() === sessionStorage.current_calendar_view){
-                    $(this).prop('selected', true);
-                }
-            });
-        }
-
-        $('#event-date-toggle-container').insertAfter( $('.fc-left')).fadeTo('slow', 1);
-
-        $('#event-date-toggle').on("change", function(){
-            var selected_date = $(this).val();
-
-            $('#eventCalendar').fullCalendar('gotoDate', selected_date);
-             eventsCalMonthAJAX(month_obj);
-             if(sessionStorage.current_calendar_view){
-                sessionStorage.current_calendar_view = '';
-            }
-        });
-    });
-    if(sessionStorage.current_calendar_view){
-         $('#eventCalendar').fullCalendar('gotoDate', sessionStorage.current_calendar_view);
-         eventsCalMonthAJAX(month_obj);
-    }
-    // initialize calendar with AJAX calls *************************************
-    $(document).on("click", "button.fc-button", function () {
-        if(sessionStorage.current_calendar_view){
-            sessionStorage.current_calendar_view = '';
-        }
-
-        eventsCalMonthAJAX(month_obj);
-    });
-
-   $('#eventCalendar').find('.fc-today-button').on("click", function(){
-       eventsCalMonthAJAX(month_obj);
-       var current_view = get_current_view();
-       $('#event-date-toggle option').each(function(){
-            if( $(this).val() === current_view){
-                $(this).prop('selected', true);
-            }
-        });
-   });
-
-    var dates = $(".agenda-event-recur-dates");
-    dates.each( function (){
-       if( $(this).text().indexOf('-') < 0 ){
-           $(this).remove();
-       }
-    });
-
-    // Event agenda view container click, go to event url
-    $('.glm-event-day-event').on("click", function(){
-        window.location = $(this).data('url');
-    });
-
+{* Set agenda view name *}
+{$agendaViewName = 'new'}
 
-});
-</script>
+{include file='front/events/agendaScript.html'}