adding dropdown to the calendar view events page, retaining month view selection...

event

going back to the events page after selecting an event brings you back to your current event month
selection. changed the year and month buttons with a year month dropdown

diff --git a/css/front.css b/css/front.css
index 49ccf8a..828a458 100755 (executable)
--- a/css/front.css
+++ b/css/front.css
@@ -163,6 +163,9 @@ input[name='contact_fname'], input[name='contact_lname']{
     margin: 0 0 10px 20px;
     position: relative;
 }
+#glm-event-view-select{
+    width: 125px;
+}
 #glm-event-detail-dates:before {
     content: "";
     background-image: url("../assets/time-icon-24x24.png");
@@ -394,7 +397,6 @@ a.fc-time-grid-event.fc-v-event {
     
 }
 
-
 .month-nav, .year-nav{
     display: inline-block;
     margin: 5px;
@@ -406,6 +408,32 @@ a.fc-time-grid-event.fc-v-event {
     border: 1px solid black;
     
 }
+#event-date-toggle{
+    width: 130px;
+    margin-bottom: 0px;
+}
+#event-date-toggle-container{
+    width: 130px;
+    height: 30px;
+    margin-left: 40px;
+    margin-bottom: 0px;
+    margin-top: -20px;
+    float: left;
+    opacity: 0;
+}
+label.date-toggle-label{
+    font-weight: bold;
+}
+@media(max-width: 810px){
+    #event-date-toggle-container{
+        float: none;
+        margin-left: 0;
+        margin-top: 10px;
+    }
+    label.date-toggle-label{
+        margin-top: 10px;
+    }
+}
 .date-highlight{
     color: red;
     font-weight: bold;
@@ -423,6 +451,13 @@ a.fc-time-grid-event.fc-v-event {
 @media (min-width: 641px){
    .view-select {
         float: right;
+        margin-right: 0;
+        padding-right: 0;
+    }
+    #glm-event-view-select{
+        float: right;
+        margin-right: 0;
+        padding-right: 0;
     }
 }
 .agenda-event-name{
@@ -442,6 +477,7 @@ a.fc-time-grid-event.fc-v-event {
 .agenda-event-recur-dates{
 /*    font-style: italic;*/
 }
+
 #glmRealEmail {
     display: none;
 }

diff --git a/models/front/events/list.php b/models/front/events/list.php
index e6481bd..3299651 100644 (file)
--- a/models/front/events/list.php
+++ b/models/front/events/list.php
@@ -753,12 +753,19 @@ class GlmMembersFront_events_list extends GlmMembersFront_events_baseAction
             $calendar_view = $calendar_view[0]['calendar_view'];
         }
         
-        $years = array('current' => $current_year = date("Y"), 'last' => date('Y') - 1,'next' => date('Y') +1 );
+        $years = array('current' => $current_year = date("Y"), 'next' => date('Y') +1 );
         $months = [];
         foreach($years as $key=>$year){
-            $sql = 'SELECT MONTH(start_time) as month FROM '. GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX .'times ';
-            $sql .= "WHERE YEAR(start_time) = $year GROUP BY month";
-            $results[$year] = $wpdb->get_results($sql, ARRAY_A);
+            if($current_year == $year){
+                $sql = 'SELECT MONTH(start_time) as month FROM '. GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX .'times ';
+                $sql .= "WHERE YEAR(start_time) = $year AND MONTH(start_time) >= MONTH(CURDATE()) GROUP BY month";
+                $results[$year] = $wpdb->get_results($sql, ARRAY_A);
+            } else {
+                $sql = 'SELECT MONTH(start_time) as month FROM '. GLM_MEMBERS_EVENTS_PLUGIN_DB_PREFIX .'times ';
+                $sql .= "WHERE YEAR(start_time) = $year GROUP BY month";
+                $results[$year] = $wpdb->get_results($sql, ARRAY_A);
+            }
+            
         }
         
         foreach($results as $year => $month){

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index cfa3b0c..f119320 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -95,17 +95,20 @@
     </div>
     {assign var="current_year" value=$smarty.now|date_format:"%Y"}
     {assign var="current_month" value=$smarty.now|date_format:"%m"}
-    
-    <div id="year-nav-conainer">
-        {foreach $months as $year=>$month}
-            <div data-year="{$year}" {if $year == $current_year} class="year-nav date-highlight current-date" {else} class="year-nav"{/if}> {$year}</div>
-        {/foreach}
-    </div>
-    
-    <div id="month-nav-container">
-        {foreach $months[$current_year] as $month}
-            <div data-month="{$current_year}-{$month.date}-01" {if $month.date == $current_month} class="month-nav date-highlight current-date" {else} class="month-nav"{/if}> {$month.name} </div>
-        {/foreach}
+
+    <div id="event-date-toggle-container">
+        <label class="date-toggle-label" for="#event-date-toggle"> Select a Date <label>
+        <select id="event-date-toggle">
+            {foreach $months as $year=>$month}{
+                {foreach $month as $m=>$value}
+                    {if $current_month == $value.date && $current_year == $year}
+                        <option value="{$year}-{$value.date}-01" selected> {$value.name} - {$year}</option>
+                    {else}
+                        <option value="{$year}-{$value.date}-01"> {$value.name} - {$year}</option>
+                    {/if}
+                {/foreach}
+            {/foreach}
+        </select>
     </div>
     <!-- Calendar -->
     <div id="eventCalendar" style='position: relative;'>
@@ -137,6 +140,7 @@
         var category            = $('#glm-event-category').val();
         var current_month       = $('{$current_month}');
         var current_year        = $('{$current_year}');
+        var retain_date;
         
         months = JSON.parse(months);
 
@@ -144,7 +148,7 @@
         event_search.on('click', function(){
             sessionStorage.override = 'yes';
         });
-
+        
         if( sessionStorage.view && sessionStorage.override === 'no' ){
             view = sessionStorage.view;
         } else if( sessionStorage.override === 'yes'){
@@ -224,6 +228,12 @@
             handleWindowResize: true,
             lazyFetching: true,
             eventClick : function (event){
+                var calCurrDate = $('#eventCalendar').fullCalendar('getView').start;
+                var d = moment(calCurrDate).add(7, 'days').format('YYYY-MM-01');
+                retain_date = d;
+                sessionStorage.current_calendar_view = retain_date;
+            
+            
                 location.href = event.url + '?glm_event_from=' + event.start.format();
                 return false;
             },
@@ -266,9 +276,38 @@
                 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);
         });
 
@@ -277,6 +316,9 @@
        });
        
        $(document).on("click", '.month-nav',function(){
+          if(sessionStorage.current_calendar_view){
+                sessionStorage.current_calendar_view = '';
+           }
            
           $('.month-nav').removeClass("date-highlight");
           $(this).addClass("date-highlight");
@@ -286,7 +328,11 @@
           
        });
        $('.year-nav').on("click", function(){
-           $('.year-nav').removeClass("date-highlight");
+           if(sessionStorage.current_calendar_view){
+                sessionStorage.current_calendar_view = '';
+            }
+       
+          $('.year-nav').removeClass("date-highlight");
           $(this).addClass("date-highlight");
        
            var year = $(this).attr('data-year');
@@ -308,7 +354,8 @@
                $('#month-nav-container').append(option);
             });
        });
-       
+
+        
         var dates = $(".agenda-event-recur-dates");
         dates.each( function (){
            if( $(this).text().indexOf('-') < 0 ){

diff --git a/views/front/events/searchForm.html b/views/front/events/searchForm.html
index 117da84..be7e1ae 100644 (file)
--- a/views/front/events/searchForm.html
+++ b/views/front/events/searchForm.html
@@ -84,7 +84,7 @@
         </a>
     </div>
 {/if}
-<div class="small-7 medium-3 columns view-select" style="margin-right: 15px;">
+<div class="small-7 medium-3 columns view-select">
     <select id="glm-event-view-select">
         <option id="agenda-view-option" value="agenda"> Agenda View </option>
         <option id="calendar-view-option" value="calendar"> Calendar View </option>