diff --git a/app/assets/javascripts/calendar_widget.js b/app/assets/javascripts/calendar_widget.js
index f663bb7..b79fcd9 100644
--- a/app/assets/javascripts/calendar_widget.js
+++ b/app/assets/javascripts/calendar_widget.js
@@ -10,6 +10,8 @@
         fetchInterval = null,
         month = date.getMonth(),
         year = date.getFullYear(),
+        first_target_day = new Date(year,month,1),
+        last_target_day = new Date(year,month+1,0),
         firstDay = new Date(year,month,1),
         lastDay = new Date(year,month+1,0),
         today = date.getDate(),
@@ -40,12 +42,12 @@
     }
     function lighten_color(my_hex,percent){
       if (my_hex[0] == '#'){
-        my_hex = my_hex.slice(1,-1)
+        my_hex = my_hex.slice(1)
       }
       var comp = ''
       var rgb = []
       var batch_size = Math.ceil(my_hex.length/3)
-      for (i=0;i<3;i++){
+      for (var i=0;i<3;i++){
         rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
       }
       $.each(rgb,function(){
@@ -55,7 +57,7 @@
         if (tmp>255) tmp = 255 
         if (tmp < 0) tmp = 0 
         tmp = tmp.toString(16)
-        for (i=0;i<2-tmp.length;i++){
+        for (var i=0;i<2-tmp.length;i++){
           tmp = '0' + tmp
         }
         comp = comp + tmp
@@ -222,6 +224,7 @@
                   var first_line_first_date = first_line_first_day.getDate()
                   var first_line_first_month = first_line_first_day.getMonth()
                   var first_line_first_year = first_line_first_day.getFullYear()
+                  first_target_day = new Date(first_line_first_year,first_line_first_month,first_line_first_date)
                   for(var i = 0;i < 7;i++){
                     var td = $("<td><div></div></td>");
                     if(i >= firstDay.getDay()){
@@ -258,6 +261,7 @@
                       next_month = 0;
                       next_year = next_year + 1; 
                     }
+                    last_target_day = new Date(next_year,next_month,6-lastDay.getDay())
                     for(var i = 0;i < 7;i++){
                         var td = $("<td><div></div></td>");
                         if(i <= lastDay.getDay()){
@@ -303,10 +307,11 @@
     }
     var fetchEvents = function(){
       var usd = Math.round(firstDay/1000),
-          ued = Math.round(lastDay/1000);
+          usd_target = Math.round(first_target_day/1000),
+          ued_target = Math.round(last_target_day/1000);
       $.ajax({
         url : "/xhr/calendars/agenda",
-        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
+        data : {"month_start" : usd,"unix_start" : usd_target, "unix_end" : ued_target, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
         dataType : "json",
         type : "get"
       }).done(function(data){
@@ -369,9 +374,9 @@
         })
         var clicked_color = dom.find('.w-calendar-event').css('background-color')
         if (clicked_color){
-          clicked_color = lighten_color(rgb2hex(clicked_color),-20)
+          clicked_color = lighten_color(rgb2hex(clicked_color),-35)
           if (clicked_color!='#000000'){
-            dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
+            dom.find('table').append($('<style>.widget-calendar-1 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
           }
         }
         monthDom.find("i.loading").addClass("hide");
@@ -402,14 +407,20 @@
       lastDay = new Date(year,month+1,0);
       today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
       last_inserted_date = 1;
-      renderMonth();
-      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      var toggle_type,ele;
       if (toggle_data && toggle_flag){
-        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
       }else{
         toggle_data = undefined
       }
-      fetchInterval = setTimeout(fetchEvents,1000);
+      renderMonth();
+      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (ele){
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_event(ele,toggle_type)
+      }
+      fetchInterval = setTimeout(fetchEvents,300);
     }
     nextMonthFunc = this.nextMonth;
     this.prevMonth = function(toggle_flag){
@@ -424,14 +435,20 @@
       lastDay = new Date(year,month+1,0);
       today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
       last_inserted_date = 1;
-      renderMonth();
-      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      var toggle_type,ele;
       if (toggle_data && toggle_flag){
-        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
       }else{
         toggle_data = undefined
       }
-      fetchInterval = setTimeout(fetchEvents,1000);
+      renderMonth();
+      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (ele){
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_event(ele,toggle_type)
+      }
+      fetchInterval = setTimeout(fetchEvents,300);
     }
     prevMonthFunc = this.prevMonth;
 }
\ No newline at end of file
diff --git a/app/assets/javascripts/calendar_widget2.js b/app/assets/javascripts/calendar_widget2.js
index f663bb7..eb65861 100644
--- a/app/assets/javascripts/calendar_widget2.js
+++ b/app/assets/javascripts/calendar_widget2.js
@@ -10,6 +10,8 @@
         fetchInterval = null,
         month = date.getMonth(),
         year = date.getFullYear(),
+        first_target_day = new Date(year,month,1),
+        last_target_day = new Date(year,month+1,0),
         firstDay = new Date(year,month,1),
         lastDay = new Date(year,month+1,0),
         today = date.getDate(),
@@ -40,12 +42,12 @@
     }
     function lighten_color(my_hex,percent){
       if (my_hex[0] == '#'){
-        my_hex = my_hex.slice(1,-1)
+        my_hex = my_hex.slice(1)
       }
       var comp = ''
       var rgb = []
       var batch_size = Math.ceil(my_hex.length/3)
-      for (i=0;i<3;i++){
+      for (var i=0;i<3;i++){
         rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
       }
       $.each(rgb,function(){
@@ -55,7 +57,7 @@
         if (tmp>255) tmp = 255 
         if (tmp < 0) tmp = 0 
         tmp = tmp.toString(16)
-        for (i=0;i<2-tmp.length;i++){
+        for (var i=0;i<2-tmp.length;i++){
           tmp = '0' + tmp
         }
         comp = comp + tmp
@@ -222,6 +224,7 @@
                   var first_line_first_date = first_line_first_day.getDate()
                   var first_line_first_month = first_line_first_day.getMonth()
                   var first_line_first_year = first_line_first_day.getFullYear()
+                  first_target_day = new Date(first_line_first_year,first_line_first_month,first_line_first_date)
                   for(var i = 0;i < 7;i++){
                     var td = $("<td><div></div></td>");
                     if(i >= firstDay.getDay()){
@@ -258,6 +261,7 @@
                       next_month = 0;
                       next_year = next_year + 1; 
                     }
+                    last_target_day = new Date(next_year,next_month,6-lastDay.getDay())
                     for(var i = 0;i < 7;i++){
                         var td = $("<td><div></div></td>");
                         if(i <= lastDay.getDay()){
@@ -303,10 +307,11 @@
     }
     var fetchEvents = function(){
       var usd = Math.round(firstDay/1000),
-          ued = Math.round(lastDay/1000);
+          usd_target = Math.round(first_target_day/1000),
+          ued_target = Math.round(last_target_day/1000);
       $.ajax({
         url : "/xhr/calendars/agenda",
-        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
+        data : {"month_start" : usd,"unix_start" : usd_target, "unix_end" : ued_target, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
         dataType : "json",
         type : "get"
       }).done(function(data){
@@ -369,9 +374,9 @@
         })
         var clicked_color = dom.find('.w-calendar-event').css('background-color')
         if (clicked_color){
-          clicked_color = lighten_color(rgb2hex(clicked_color),-20)
+          clicked_color = lighten_color(rgb2hex(clicked_color),-35)
           if (clicked_color!='#000000'){
-            dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
+            dom.find('table').append($('<style>.widget-calendar-2 table.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
           }
         }
         monthDom.find("i.loading").addClass("hide");
@@ -402,14 +407,20 @@
       lastDay = new Date(year,month+1,0);
       today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
       last_inserted_date = 1;
-      renderMonth();
-      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      var toggle_type,ele;
       if (toggle_data && toggle_flag){
-        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
       }else{
         toggle_data = undefined
       }
-      fetchInterval = setTimeout(fetchEvents,1000);
+      renderMonth();
+      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (ele){
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_event(ele,toggle_type)
+      }
+      fetchInterval = setTimeout(fetchEvents,300);
     }
     nextMonthFunc = this.nextMonth;
     this.prevMonth = function(toggle_flag){
@@ -424,14 +435,20 @@
       lastDay = new Date(year,month+1,0);
       today = (initialDate.getMonth() == month && initialDate.getFullYear() == year ? initialDate.getDate() : 0);
       last_inserted_date = 1;
-      renderMonth();
-      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      var toggle_type,ele;
       if (toggle_data && toggle_flag){
-        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_type = (ele.hasClass('w-calendar-event') ? 'show' : 'hide')
       }else{
         toggle_data = undefined
       }
-      fetchInterval = setTimeout(fetchEvents,1000);
+      renderMonth();
+      dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (ele){
+        ele = dom.find('td[data-date-node="'+toggle_data+'"]')
+        toggle_event(ele,toggle_type)
+      }
+      fetchInterval = setTimeout(fetchEvents,300);
     }
     prevMonthFunc = this.prevMonth;
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/calendar_widget1.css b/app/assets/stylesheets/calendar_widget1.css
index 9fb5796..41fca23 100644
--- a/app/assets/stylesheets/calendar_widget1.css
+++ b/app/assets/stylesheets/calendar_widget1.css
@@ -95,4 +95,21 @@ a.event-container{
 }
 .widget-calendar-1 td{
     cursor: pointer;
+}
+.widget-calendar-1 .w-calendar-table td div {
+    width: 3em;
+    height: 3em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.widget-calendar-1 .w-calendar-table td:hover {
+    background: #eaeaea;
+    color: black;
+}
+.widget-calendar-1 .w-calendar-table .w-calendar-event {
+    background: #444444;
+}
+.widget-calendar-1 table td.w-calendar-other-month {
+    color: #999797;
 }
\ No newline at end of file
diff --git a/app/controllers/calendars_controller.rb b/app/controllers/calendars_controller.rb
index 19d9dac..0e58593 100644
--- a/app/controllers/calendars_controller.rb
+++ b/app/controllers/calendars_controller.rb
@@ -66,7 +66,7 @@ class CalendarsController < ApplicationController
           events = Event.agenda_events(agenda_start,agenda_end)
         end
       end
-      render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:unix_start].to_i))}.to_json({"frontend" => true})
+      render json: {"events" => events,"calendar_title"=>get_calendar_title(Time.at(params[:month_start].to_i))}.to_json({"frontend" => true})
     end
   end
   def get_calendar_title(now_date=nil)
diff --git a/app/models/event.rb b/app/models/event.rb
index debe478..6da5f2c 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -155,7 +155,7 @@ class Event
         end
       when "Weekly"
           @start_date = re.start
-          @end_date = re.end
+          @edn_date = re.end
           @i = TimeDifference.between(re.start.to_date,end_date.to_date).in_weeks.to_i
           (1..@i).each do |i|
             @start_date += (7*re.frequency.to_i)