fix some error

app/assets/javascripts/calendar_widget2.js

@@ -16,7 +16,7 @@
         lastDay = new Date(Date.UTC(year,month+1,0)),
         today = date.getDate(),
         last_inserted_date = 1,
-        monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
+        monthDom = $("<div class=\"height100\" data-year='"+year+"' data-month='"+month+"'></div>"),
         eventHTML = dom.find('div.calendar-events')[0],
         event_template = dom.find('div.calendar-events .event').prop('outerHTML'),
         prevMonthFunc,
@@ -24,7 +24,7 @@
         toggle_data,
         hover_step=10,
         hover_step_max=10,
-        hover_max_height=19.2,
+        hover_max_height=13,
         toggling=false,
         switching=false,
         tp1,
@@ -101,28 +101,28 @@
     }
     $(window).resize(function(){
       var window_w = $(window).width()
-      $('.widget-calendar-2 div.calendar-events').each(function(){
-        var this_w = $(this).parents('.widget-calendar-2').width()
-        if (this_w>=728 && window_w>=768){
-          if (!$(this).hasClass('width-50')){
-            $(this).removeClass('width-100')
-            $(this).addClass('width-50')
-            $(this).css('width','50%')
-            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
-          }
-        }else{
-          if (!$(this).hasClass('width-100')){
-            $(this).addClass('width-100')
-            $(this).removeClass('width-50')
-            $(this).css('width','100%')
-            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
-          }
+      var this_w = dom.width()
+      var event_doc = dom.find('.calendar-events');
+      if (this_w>=728 && window_w>=768){
+        if (!event_doc.hasClass('width-50')){
+          event_doc.removeClass('width-100')
+          event_doc.addClass('width-50')
+          event_doc.css('width','50%')
+          event_doc.parents('div.w-calendar').find('div').eq(0).css('width','50%')
         }
+      }else{
+        if (!event_doc.hasClass('width-100')){
+          event_doc.addClass('width-100')
+          event_doc.removeClass('width-50')
+          event_doc.css('width','100%')
+          event_doc.parents('div.w-calendar').find('div').eq(0).css('width','100%')
+        }
+      }
+
     
-      })
     })
     var show_event = function(date,ele){
-      var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
+      var event_div = $(ele).parents('div.w-calendar').find('div.calendar-events')
       $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
       $(ele).addClass('shown')
       function set_event(date,active_flag){
@@ -260,63 +260,64 @@
         $('.ui-dialog button').blur();
       })
       function event_hover(){
-        if (!$(this).hasClass('active')){
-          tp1 = $(this).parents('.calendar-events').eq(0).find('.event.active .event-containers')
-          tp2 = $(this).find('.event-containers')
+        var event_doc = $(this).parents('.event').eq(0);
+        if (!event_doc.hasClass('active')){
+          tp1 = event_doc.parents('.calendar-events').eq(0).find('.event.active .event-containers');
+          tp2 = event_doc.find('.event-containers');
           if (!toggling){
-            tp2.css('height','0')
-            tp2.css('min-height','0')
-            hover_step = hover_step_max
+            tp2.css('height','0');
+            tp2.css('min-height','0');
+            hover_step = hover_step_max;
           }else{
-            hover_step = hover_step_max - hover_step
+            hover_step = hover_step_max - hover_step;
           }
-          $(this).addClass('active')
+          event_doc.addClass('active');
           function toggle_height(){
-            tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em')
-            tp2.css('height',(hover_max_height-hover_step*hover_max_height/20)+'em')
+            tp1.css('height',(hover_step*hover_max_height/hover_step_max)+'em');
+            tp2.css('height',(hover_max_height-hover_step*hover_max_height/hover_step_max)+'em');
             hover_step = hover_step-1;
             if (hover_step>=0){
-              setTimeout(toggle_height,50)
+              setTimeout(toggle_height,50);
             }else{
-              tp1.css('min-height','')
-              tp2.css('min-height','')
-              tp1.css('height','')
-              tp2.css('height','')
-              toggling = false
+              tp1.css('min-height','');
+              tp2.css('min-height','');
+              tp1.css('height','');
+              tp2.css('height','');
+              toggling = false;
             }
           }
           if (!toggling){
-            setTimeout(toggle_height,50)
+            setTimeout(toggle_height,50);
           }
-          tp1.css('height',tp1.height())
-          tp1.css('min-height','0')
-          tp1.parents('.event').removeClass('active')
-          toggling = true
+          tp1.css('height',tp1.height());
+          tp1.css('min-height','0');
+          tp1.parents('.event').removeClass('active');
+          toggling = true;
         }
       }
-      event_div.find('.event').hover(event_hover)
-      event_div.find('.event').click(event_hover)
-      $(ele).parents('div[data-module="calendar"]').css('display','flex')
-      if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
+      event_div.find('.event .event-header').hover(event_hover);
+      event_div.find('.event .event-header').click(event_hover);
+      $(ele).parents('div.w-calendar').css('display','flex');
+      if ($(ele).parents('div.w-calendar').width()>=728 && $(window).width()>=768){
         event_div.css('width','50%')
         event_div.addClass('width-50')
         event_div.removeClass('width-100')
-        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
+        $(ele).parents('div.w-calendar').find('div').eq(0).css('width','50%')
       }else{
         event_div.css('width','100%')
         event_div.addClass('width-100')
         event_div.removeClass('width-50')
-        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
+        $(ele).parents('div.w-calendar').find('div').eq(0).css('width','100%')
       }
       event_div.show()
     }
     var hide_event = function(ele){
       $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
-      var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
-      $(ele).parents('div[data-module="calendar"]').css('display','block')
-      $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','')
+      var event_div = $(ele).parents('div.w-calendar').find('div.calendar-events')
+      $(ele).parents('div.w-calendar').css('display','block')
+      $(ele).parents('div.w-calendar').find('div').eq(0).css('width','')
       event_div.hide()
-      //$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
+      //$(ele).parents('div.w-calendar').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
       event_div.find('.event-container-one').remove()
     }
     var renderMonth = function(){
@@ -462,7 +463,7 @@
         type : "get"
       }).done(function(data){
         events = {}
-        $(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title'])
+        $(dom).find('.w-calendar-title span').eq(0).html(data['calendar_title'])
         $.each(data.events,function(index,eve){
           var sd = new Date(eve.start),
               ed = new Date(eve.end),
@@ -475,7 +476,7 @@
           }
           if(dayDiff > 0){
             var inserting_date = sd.getDate();
-            for(var i = 0;i <= dayDiff; i++){
+            for(var i = 0;i < dayDiff; i++){
               var dt = inserting_date + "-" + sd.getMonth() + "-" + sd.getFullYear(),
                   td = dom.find("td[data-date-node=" + dt + "]");
               if (events[dt]==undefined){
@@ -532,7 +533,7 @@
 
     this.currentMonth = function(){
       renderMonth();
-      var div_tag = $('<div></div>')
+      var div_tag = $('<div class="height100"></div>')
       var widge_title = dom.find('.w-calendar-title').eq(0)
       div_tag.html(monthDom)
       div_tag.prepend(widge_title)

app/assets/stylesheets/calendar_widget2.css.scss

@@ -2,6 +2,12 @@
     .w-calendar-table {
         table-layout: fixed;
         width: 100%;
+        flex: 1;
+    }
+    .height100 {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
     }
     a.event-container-one{
         color: inherit;
@@ -39,9 +45,14 @@
     .calendar-events{
         position: relative;
         background: #fbfbfb;
+        display: flex;
+        flex-direction: column;
     }
     .month_template{
         position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
     }
     flex-wrap: wrap;
     margin-top: 2em;
@@ -55,6 +66,7 @@
         color: inherit;
         cursor: pointer;
         border: 0;
+        vertical-align: middle;
     }
     .w-calendar-table td div{
         display: inline-flex;
@@ -89,11 +101,17 @@
         color: rgb(255, 255, 255);
         padding: 0px 10%;
         display: flex;
-        flex-flow: row-reverse wrap;
         line-height: 2em;
-        justify-content: center;
+        justify-content: space-between;
         font-size: 1.85em;
         width: 100%;
+        .w-calendar-title span:last-child{
+            float: right;
+        }
+    }
+    .w-calendar-title.center{
+        text-align: center;
+        justify-content: center;
     }
     .calendar-dialog div.ui-dialog-content {
         max-height: 20em !important;
@@ -201,13 +219,14 @@
     .event-wraper{
         position: relative;
         overflow: hidden;
+        flex: 1;
     }
     .event-container-one:not(.active) {
         right: -100%;
     }
     .event.active .event-containers{
-        min-height: 19.2em;
-        height: auto;
+        min-height: 13em;
+        height: 100%;
     }
     .calendar-events.width-100 .switch_button_wraper{
         width: 100%;
@@ -231,4 +250,10 @@
         box-shadow: 0em 0.1em 0.3em 0em;
         margin-bottom: 0.25em;
     }
+    .event{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
 }

app/controllers/calendars_controller.rb

@@ -10,8 +10,10 @@ class CalendarsController < ApplicationController
       "extras" => {
         "page_id" => OrbitHelper.params[:page_id],
         'widget_title' => page.name,
+        'widget_title_class' => page.name.blank? ? 'center' : '',
         'calendar_title' => get_calendar_title,
-        'style_tag' => stylesheet_link_tag(style_file)
+        'style_tag' => stylesheet_link_tag(style_file),
+        'default_column' => widget_default_column
       }
     }
   end
@@ -32,7 +34,9 @@ class CalendarsController < ApplicationController
         "subpart-id" => part.id.to_s,
         "more_url" => OrbitHelper.widget_more_url,
         'widget_title' => part.title,
-        'calendar_title' => get_calendar_title
+        'widget_title_class' => part.title.blank? ? 'center' : '',
+        'calendar_title' => get_calendar_title,
+        'default_column' => widget_default_column
       }
     }
   end
@@ -102,6 +106,19 @@ class CalendarsController < ApplicationController
     month_name = I18n.locale.to_s=='zh_tw' ? now_date.month : I18n.t("calendar.month_name.#{now_date.month}")
     I18n.t("calendar.calendar_title",year: now_date.year,month: month_name)
   end
+  def widget_default_column
+      (1..5).collect do |i|
+        "<tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+        </tr>"
+      end.join("\n")
+  end
 end
 
 

bin/rails

@@ -0,0 +1,18 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/announcement/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+# require 'rails/all'
+# require 'rails/engine/commands'
+require "action_controller/railtie"
+require "action_mailer/railtie"
+require "sprockets/railtie"
+require "rails/test_unit/railtie"
+require 'rails/engine/commands'
+require "mongoid/railtie"

modules/calendar/_calendar_widget1.html.erb

@@ -26,7 +26,9 @@
                     <th>Sat</th>
                 </tr>
             </thead>
-            <tbody></tbody>
+            <tbody>
+                {{default_column}}
+            </tbody>
         </table>
     </div>
     <div class="calendar-events" style="display: none;">

modules/calendar/_calendar_widget2.html.erb

@@ -1,13 +1,13 @@
 <div class="w-calendar widget-calendar-2" data-module="calendar">
-    <div class="w-calendar-title">
-        <span>{{widget_title}}</span>
+    <div class="w-calendar-title {{widget_title_class}}">
         <span>{{calendar_title}}</span>
+        <span>{{widget_title}}</span>
     </div>
     <div class='month_template'>
-            <h4 class="widget-title ">
-                <span class="text"><span style="display: none;">placeholder</span></span>
-                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
-            </h4>
+        <h4 class="widget-title ">
+            <span class="text"><span style="display: none;">placeholder</span></span>
+            <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
+        </h4>
         <div class="w-calendar-nav">
             <a href="#" class="w-calendar-nav-prev">
                 <i class="fa fa-chevron-left"></i>
@@ -30,7 +30,9 @@
                     <th>Sat</th>
                 </tr>
             </thead>
-            <tbody></tbody>
+            <tbody>
+                {{default_column}}
+            </tbody>
         </table>
     </div>
     <div class="calendar-events" style="display: none;">

modules/calendar/index2.html.erb

@@ -28,7 +28,9 @@
                     <th>Sat</th>
                 </tr>
             </thead>
-            <tbody></tbody>
+            <tbody>
+                {{default_column}}
+            </tbody>
         </table>
     </div>
     <div class="calendar-events" style="display: none;">

modules/calendar/index3.html.erb

@@ -1,9 +1,9 @@
 <script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script>
 {{style_tag}}
 <div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}">
-    <div class="w-calendar-title">
-        <span>{{widget_title}}</span>
+    <div class="w-calendar-title {{widget_title_class}}">
         <span>{{calendar_title}}</span>
+        <span>{{widget_title}}</span>
     </div>
     <div class='month_template'>
             <h4 class="widget-title ">
@@ -32,7 +32,9 @@
                     <th>Sat</th>
                 </tr>
             </thead>
-            <tbody></tbody>
+            <tbody>
+                {{default_column}}
+            </tbody>
         </table>
     </div>
     <div class="calendar-events" style="display: none;">

script/rails

@@ -1,8 +0,0 @@
-#!/usr/bin/env ruby
-# This command will automatically be run when you run "rails" with Rails 3 gems installed from the root of your application.
-
-ENGINE_ROOT = File.expand_path('../..', __FILE__)
-ENGINE_PATH = File.expand_path('../../lib/calendar/engine', __FILE__)
-
-require 'rails/all'
-require 'rails/engine/commands'