adding test date navigation for events on the calender view

adding a toggle between the past year, current year and next year which will populate months that have
events

diff --git a/css/front.css b/css/front.css
index 3e46db2..b27e178 100755 (executable)
--- a/css/front.css
+++ b/css/front.css
@@ -390,6 +390,20 @@ a.fc-time-grid-event.fc-v-event {
     display: block;
     color: black;
 }
+.month-nav-container{
+    
+}
+.date-highlight{
+    color: red;
+    font-weight: bold;
+}
+.month-nav, .year-nav{
+    display: inline-block;
+    margin: 5px;
+}
+.month-nav:hover, .year-nav:hover{
+    cursor: pointer;
+}
 @media (max-width: 640px) and (min-width: 320px){
     .view-select{
         float: left;

diff --git a/models/front/events/list.php b/models/front/events/list.php
index 34ffd0e..e6481bd 100644 (file)
--- a/models/front/events/list.php
+++ b/models/front/events/list.php
@@ -752,7 +752,26 @@ class GlmMembersFront_events_list extends GlmMembersFront_events_baseAction
         } else {
             $calendar_view = $calendar_view[0]['calendar_view'];
         }
-
+        
+        $years = array('current' => $current_year = date("Y"), 'last' => date('Y') - 1,'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);
+        }
+        
+        foreach($results as $year => $month){
+            foreach($month as $key=>$value){
+                $month_string = $year .'-'. $value['month'] . '-01';
+                $date = strtotime($month_string);
+                $month_date = date('m', $date);
+                $month_display = date('M', $date);
+                $months[$year][] = array('name'=> $month_display, 'date'=>$month_date);
+            }
+        }
+        $json_months = json_encode($months);
+        ksort($months);
         // Compile template data
         $templateData = array(
             'eventDays'    => $eventDays,
@@ -778,6 +797,8 @@ class GlmMembersFront_events_list extends GlmMembersFront_events_baseAction
             'mainImgUrl'   => GLM_MEMBERS_PLUGIN_MEDIA_URL . '/images/large/',
             'imgUrl'       => GLM_MEMBERS_PLUGIN_MEDIA_URL . '/images/small/',
             'calDates'     => $calDates,
+            'months'       => $months,
+            'json_months'  => $json_months,
             'cal_view'     => $calendar_view,
 //            'override'     => $override_default_view
         );

diff --git a/views/front/events/agenda.html b/views/front/events/agenda.html
index b6243cc..4941be1 100644 (file)
--- a/views/front/events/agenda.html
+++ b/views/front/events/agenda.html
@@ -93,6 +93,20 @@
 
         </div>
     </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" {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" {else} class="month-nav"{/if}> {$month.name} </div>
+        {/foreach}
+    </div>
     <!-- Calendar -->
     <div id="eventCalendar" style='position: relative;'>
         <div class='event-overlay'>
@@ -119,7 +133,10 @@
         var event_search        = $(".glm-search-icon");
         var main_content        = $("#main-content");
         var view                = '{$cal_view}';
-        var category          = $('#glm-event-category').val();
+        var months              = '{$json_months}';
+        var category            = $('#glm-event-category').val();
+        
+        months = JSON.parse(months);
 
 //        console.log(sessionStorage.view + " : " + sessionStorage.override);
         event_search.on('click', function(){
@@ -256,7 +273,33 @@
        $('#eventCalendar').find('.fc-today-button').on("click", function(){
            eventsCalMonthAJAX(month_obj);
        });
+       
+       $(document).on("click", '.month-nav',function(){
+           
+          $('.month-nav').removeClass("date-highlight");
+          $(this).addClass("date-highlight");
+          var new_date = $(this).attr('data-month');
+          $('#eventCalendar').fullCalendar('gotoDate', new_date);
+          eventsCalMonthAJAX(month_obj);
+       });
+       $('.year-nav').on("click", function(){
+           $('.year-nav').removeClass("date-highlight");
+          $(this).addClass("date-highlight");
+       
+           var year = $(this).attr('data-year');
 
+           var new_months = months[year];
+           
+           option = {};
+           $('#month-nav-container').empty();
+
+           $.each(new_months, function(index, value){
+               {literal} var option = $('<div>', {class: 'month-nav',text: value.name}); {/literal}
+               option.attr('data-month', year + '-' + value.date +'-01');
+               $('#month-nav-container').append(option);
+            });
+       });
+       
         var dates = $(".agenda-event-recur-dates");
         dates.each( function (){
            if( $(this).text().indexOf('-') < 0 ){