diff --git a/app/assets/javascripts/event_news_calendar_widget2.js b/app/assets/javascripts/event_news_calendar_widget2.js
index c2fc45b..44e0451 100644
--- a/app/assets/javascripts/event_news_calendar_widget2.js
+++ b/app/assets/javascripts/event_news_calendar_widget2.js
@@ -1,4 +1,4 @@
- var CalendarModuleMonth2 = function(date,dom,subpart,url,index_flag){
+  var EventCalendarModuleMonth2 = function(date,dom,subpart,url,index_flag){
     _this = this;
     var events = {}
     var template = dom.find(".month_template"),
@@ -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)
diff --git a/app/assets/stylesheets/event_news_calendar_widget2.css.scss b/app/assets/stylesheets/event_news_calendar_widget2.css.scss
index fe56aad..11c45a4 100644
--- a/app/assets/stylesheets/event_news_calendar_widget2.css.scss
+++ b/app/assets/stylesheets/event_news_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;
+    }
 }
\ No newline at end of file
diff --git a/app/controllers/event_news_controller.rb b/app/controllers/event_news_controller.rb
index eac491e..85b4dad 100644
--- a/app/controllers/event_news_controller.rb
+++ b/app/controllers/event_news_controller.rb
@@ -432,7 +432,10 @@ class EventNewsController < ApplicationController
         "read_more" => read_more_url,
         "read_more_text" => "read more",
         "extra_brefore_html" => extra_html,
-        "extra_after_html" => extra_after_html
+        "extra_after_html" => extra_after_html,
+        "calendar_title" => get_calendar_title,
+        "widget_title" => subpart.title,
+        'widget_title_class' => subpart.title.blank? ? 'center' : '',
       }
     }
   end
@@ -818,14 +821,16 @@ class EventNewsController < ApplicationController
         all_tags = ['all'] if all_tags.length==0
         page = Page.where(:page_id=> subpart.read_more_page_id).first rescue nil
         page = Page.where(:module => "event_news").first rescue nil if page.nil?
-        read_more_url = "/#{I18n.locale.to_s + page.url}" rescue ""
-        read_more_url = read_more_url + "?" + {"category"=>all_cats,"tags"=> all_tags}.to_param if read_more_url != ""
-        
+        read_more_url_root = "/#{I18n.locale.to_s + page.url}" rescue ""
+        read_more_url = read_more_url_root + "?" + {"category"=>all_cats,"tags"=> all_tags}.to_param if read_more_url != ""
+      else
+        page = Page.where(:module => "event_news").first
+        read_more_url_root = "/#{I18n.locale.to_s + page.url}" rescue ""
       end
       if params[:unix_start].present? && params[:unix_end].present?
         agenda_start = Time.at(params[:unix_start].to_i).utc.to_s
         agenda_end = Time.at(params[:unix_end].to_i).utc.to_s
-        events = EventNews.agenda_events(agenda_start,agenda_end)
+        events = EventNews.agenda_events(agenda_start,agenda_end,read_more_url_root)
       end
       render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:month_start].to_i).utc)}.to_json({"frontend" => true})
     end
diff --git a/app/models/event_news.rb b/app/models/event_news.rb
index 453e07d..74f362e 100644
--- a/app/models/event_news.rb
+++ b/app/models/event_news.rb
@@ -207,20 +207,20 @@ class EventNews
     (self.custom_carousel_image_width.blank? ? AnnouncementSetting.last.carousel_image_width : self.custom_carousel_image_width)
   end
 
-  def self.agenda_events(agenda_start, agenda_end)
-    events = self.monthly_event(agenda_start, agenda_end).convert_front
+  def self.agenda_events(agenda_start, agenda_end,read_more_url)
+    events = self.monthly_event(agenda_start, agenda_end).convert_front(read_more_url)
   end
   def self.monthly_event(start_date,end_date)
     self.any_of({:event_date.lte => start_date,:event_end_date.gte => start_date},{:event_date.gte => start_date,:event_end_date.lte => end_date},{:event_date.lte => end_date,:event_end_date.gte => end_date}).asc(:event_date)
   end
-  def self.convert_front
+  def self.convert_front(read_more_url)
     self.all.collect do |re|
       {:id => re.id.to_s,
        :title=>re.title,
        :note=>re.subtitle || "",
        :allDay => false,
        :color => nil,
-       :url_linked => (re.is_external_link? ? re.external_link : OrbitHelper.widget_item_url(re.to_param) rescue ""),
+       :url_linked => (re.is_external_link? ? re.external_link : "#{read_more_url}/#{re.to_param}" rescue ""),
        :start => re.event_date,
        :end => re.event_end_date}
     end
diff --git a/modules/event_news/_event_news_widget18.html.erb b/modules/event_news/_event_news_widget18.html.erb
index 6cb1f26..e3ad478 100644
--- a/modules/event_news/_event_news_widget18.html.erb
+++ b/modules/event_news/_event_news_widget18.html.erb
@@ -1,6 +1,7 @@
 <div class="w-calendar widget-calendar-2 widget-event-news-calendar-2" data-module="event_news">
-    <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 ">
@@ -54,27 +55,29 @@
 </div>
 <%= stylesheet_link_tag "event_news_calendar_widget2" %>
 <script>
-    if(document.getElementById("event-news-calendar-widget_module2") == null){
-        var tag = document.createElement('script');
-        tag.setAttribute("id", "event-news-calendar-widget_module2");
-        tag.src = "/assets/event_news_calendar_widget2.js";
-        tag.onload = function(){
-            $("div.widget-calendar-2[data-module=event_news]").each(function(index){
-                var calendar = $(this),
-                    cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
-                cmi.currentMonth();
-                calendar.find("div.w-calendar-nav a").on("click",function(){
-                    var el = $(this);
-                    if(el.hasClass("w-calendar-nav-prev")){
-                        cmi.prevMonth();
-                    }else if(el.hasClass("w-calendar-nav-next")){
-                        cmi.nextMonth();
-                    }
-                    return false;
+    $(document).ready(function(){
+        if(document.getElementById("event-news-calendar-widget_module2") == null){
+            var tag = document.createElement('script');
+            tag.setAttribute("id", "event-news-calendar-widget_module2");
+            tag.src = "<%= asset_path('event_news_calendar_widget2.js') %>";
+            tag.onload = function(){
+                $("div.widget-calendar-2[data-module=event_news]").each(function(index){
+                    var calendar = $(this),
+                        cmi = new EventCalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
+                    cmi.currentMonth();
+                    calendar.find("div.w-calendar-nav a").on("click",function(){
+                        var el = $(this);
+                        if(el.hasClass("w-calendar-nav-prev")){
+                            cmi.prevMonth();
+                        }else if(el.hasClass("w-calendar-nav-next")){
+                            cmi.nextMonth();
+                        }
+                        return false;
+                    })
                 })
-            })
+            }
+            var head = document.getElementsByTagName("head");
+            head[0].appendChild(tag);
         }
-        var head = document.getElementsByTagName("head");
-        head[0].appendChild(tag);
-    }
+    })
 </script>
\ No newline at end of file