adding default highlighting on the current month after toggling
authorAnthony Talarico <talarico@gaslightmedia.com>
Thu, 11 May 2017 14:56:53 +0000 (10:56 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Thu, 11 May 2017 14:56:53 +0000 (10:56 -0400)
retaining the month color of the current month when switching between years and landing back on the
current year

css/front.css
views/front/events/agenda.html

index b27e178..e348751 100755 (executable)
@@ -393,6 +393,7 @@ a.fc-time-grid-event.fc-v-event {
 .month-nav-container{
     
 }
+
 .date-highlight{
     color: red;
     font-weight: bold;
@@ -404,6 +405,10 @@ a.fc-time-grid-event.fc-v-event {
 .month-nav:hover, .year-nav:hover{
     cursor: pointer;
 }
+/*.current-date{
+    background: #f5822a;
+    color: white;
+}*/
 @media (max-width: 640px) and (min-width: 320px){
     .view-select{
         float: left;
index 4941be1..b0139a9 100644 (file)
     
     <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>
+            <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" {else} class="month-nav"{/if}> {$month.name} </div>
+            <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>
     <!-- Calendar -->
         var view                = '{$cal_view}';
         var months              = '{$json_months}';
         var category            = $('#glm-event-category').val();
+        var current_month       = $('{$current_month}');
+        var current_year        = $('{$current_year}');
         
         months = JSON.parse(months);
 
           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");
            $('#month-nav-container').empty();
 
            $.each(new_months, function(index, value){
-               {literal} var option = $('<div>', {class: 'month-nav',text: value.name}); {/literal}
+            
+               if(value.date == current_month.selector){
+                   {literal} var option = $('<div>', {class: 'month-nav date-highlight',text: value.name}); {/literal}
+               } else {
+                   {literal} var option = $('<div>', {class: 'month-nav',text: value.name}); {/literal}
+               }
+               
                option.attr('data-month', year + '-' + value.date +'-01');
                $('#month-nav-container').append(option);
             });