From 258a09d3dd9d36ed996711c6a64c87c010cc7e07 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 5 Apr 2019 15:48:27 -0400
Subject: [PATCH] Agenda view updates for events.

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        | 250 +----------------------
 views/front/events/agendaScript.html  | 254 ++++++++++++++++++++++++
 views/front/events/agendaScript2.html | 246 +++++++++++++++++++++++
 views/front/events/agenda_new.html    | 274 ++------------------------
 4 files changed, 524 insertions(+), 500 deletions(-)
 create mode 100644 views/front/events/agendaScript.html
 create mode 100644 views/front/events/agendaScript2.html

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index 75a1310..971b1b8 100644
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -126,251 +126,7 @@
     </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
index 0000000..bdcaa98
--- /dev/null
+++ b/views/front/events/agendaScript.html
@@ -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
index 0000000..fab4cff
--- /dev/null
+++ b/views/front/events/agendaScript2.html
@@ -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>
diff --git a/views/front/events/agenda_new.html b/views/front/events/agenda_new.html
index 3c05997..9799a79 100644
--- a/views/front/events/agenda_new.html
+++ b/views/front/events/agenda_new.html
@@ -31,6 +31,17 @@
 .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>
@@ -133,10 +144,15 @@
                                         </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}
@@ -171,255 +187,7 @@
     </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'}
-- 
2.17.1