diff --git a/app/assets/javascripts/calendar.js b/app/assets/javascripts/calendar.js
index 1199d10..67692b3 100644
--- a/app/assets/javascripts/calendar.js
+++ b/app/assets/javascripts/calendar.js
@@ -79,21 +79,35 @@ var Calendar = function(dom){
 			}
 
 			c.event_create_space.show();
-			var dtpick = $('.datetimepick');
-			var pickers = new Array();
+			var pickers = $('.default_picker input');
 			var checked = ($("#all_day_check").is(":checked") ? true : false);
 			var checked_function = function(c){
+				var d = new Date()
 				if(c){
 					for(i=0;i<pickers.length;i++){
-						var input = pickers[i].find("input");
-						input.val(input.val().split(" ")[0]);
+						pickers.eq(i).ui_datetimepicker("destroy");
+						pickers.eq(i).attr('placeholder','yyyy/MM/dd')
+						var value = pickers.eq(i).val()
+						if (value != ''){
+							pickers.eq(i).val(value.split(" ")[0])
+						}
+						pickers.eq(i).ui_datepicker({dateFormat: 'yy/mm/dd',show_view: ''})
 					}
 				}else{
 					for(i=0;i<pickers.length;i++){
-						var d = new Date();
-						var input = pickers[i].find("input");
-						if(input.val())
-							input.val(input.val() + " " + d.getHours() + ":" + d.getMinutes());
+						pickers.eq(i).ui_datepicker("destroy");
+						pickers.eq(i).attr('placeholder','yyyy/MM/dd HH:mm')
+						var value = pickers.eq(i).val()
+						if (value != ''){
+							pickers.eq(i).val(value + " " + d.getHours() + ":" + d.getMinutes())
+						}
+						pickers.eq(i).ui_datetimepicker({
+	            dateFormat: 'yy/mm/dd',
+	            controlType: 'select',
+	            timeInput: true,
+	            oneLine: true,
+	            timeFormat: 'HH:mm'
+	            })
 					}
 				}
 			} 
@@ -104,25 +118,13 @@ var Calendar = function(dom){
 					c.event_create_space.find("#event_frequency").removeAttr("disabled");
 				}
 			}
-			dtpick.each(function() {
-				var $data = $(this).data();
-				var options = {
-			    		format: $data.dateFormat,
-        				pickTime: $data.picktime,
-        				language: $data.language,
-        				place: "top"
-        			}
-			    pickers.push(
-			    	$(this).datetimepicker(options)
-			    );
-			});
 			$("a.btn-close").one("click",function(){
 				c.event_create_space.html("").hide();
 				$('.bootstrap-datetimepicker-widget').remove();
 				return false;
 			});
 
-			$("#all_day_check").click(function(){
+			$("#all_day_check").change(function(){
 				if($(this).is(":checked")){
 					checked = true;
 				}else{
@@ -147,17 +149,7 @@ var Calendar = function(dom){
 			c.event_create_space.find("#event_period").change(function(){
 				//repeat_function();
 			})
-			for(i=0;i<pickers.length;i++){
-				pickers[i].on("changeDate",function(e){
-					if(checked){
-						var input = $(this).find("input");
-						input.val(input.val().split(" ")[0]);
-					}
-				})
-			}
 			//repeat_function();
-			if(allDay)
-				checked_function(checked);
 		}
 		c.success_event = success_event;
 		var dview = (c.currentView == "agenda" ? "month" : c.currentView);
@@ -375,7 +367,7 @@ var EventDialog = function(calendar,event){
 		event_quick_view = $('<div class="modal calendar-modal" style="display:none;"></div>');
 		template =  '<div class="modal-header">' +
 									'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-									'<h3>'+ _event.title +'</h3>' +
+									'<h3>'+ (_event.url_linked=='' ? _event.title : ("<a href=\"" +_event.url_linked+"\">"+_event.title+"</a>")) +'</h3>' +
 								'</div>' +
 								'<div class="modal-body">' +
 									'<div class="event_summary">' +
diff --git a/app/assets/javascripts/calendar_frontend.js b/app/assets/javascripts/calendar_frontend.js
index ef25b0b..4035437 100644
--- a/app/assets/javascripts/calendar_frontend.js
+++ b/app/assets/javascripts/calendar_frontend.js
@@ -159,7 +159,7 @@ var EventDialog = function(calendar,event){
 		template = '<div class="modal-content">' +
 								 '<div class="modal-header">' +
 								   '<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">&times;</button>' +
-								   '<h3>' + _event.title + '</h3>' +
+								   '<h3>' + (_event.url_linked=='' ? _event.title : ("<a href=\"" +_event.url_linked+"\">"+_event.title+"</a>")) + '</h3>' +
 							   '</div>' +
 							   '<div class="modal-body">' +
 								   '<div class="event_summary">' + time_string + '</div>' +
diff --git a/app/assets/javascripts/calendar_widget.js b/app/assets/javascripts/calendar_widget.js
index 7d8122a..f663bb7 100644
--- a/app/assets/javascripts/calendar_widget.js
+++ b/app/assets/javascripts/calendar_widget.js
@@ -1,6 +1,8 @@
  var CalendarModuleMonth = function(date,dom,subpart,url){
     _this = this;
+    var events = {}
     var template = dom.find(".month_template"),
+        month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"],
         monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
         initialDate = date,
         subpartid = subpart,
@@ -12,11 +14,166 @@
         lastDay = new Date(year,month+1,0),
         today = date.getDate(),
         last_inserted_date = 1,
-        monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>");
+        monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
+        eventHTML = dom.find('div.calendar-events')[0],
+        prevMonthFunc,
+        nextMonthFunc,
+        toggle_data;
     monthDom.html(template);
-
+    var format_time = function(date){
+      var hours   = date.getHours(),
+          minutes = date.getMinutes();
+      if (hours   < 10) {hours   = "0"+hours}
+      if (minutes < 10) {minutes = "0"+minutes}
+      return hours+':'+minutes;
+    }
+    function rgb2hex(rgb) {
+      rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+      function hex(x) {
+        return ("0" + parseInt(x).toString(16)).slice(-2);
+      }
+      if (rgb){
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+      }else{
+        return "#000000";
+      }
+    }
+    function lighten_color(my_hex,percent){
+      if (my_hex[0] == '#'){
+        my_hex = my_hex.slice(1,-1)
+      }
+      var comp = ''
+      var rgb = []
+      var batch_size = Math.ceil(my_hex.length/3)
+      for (i=0;i<3;i++){
+        rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
+      }
+      $.each(rgb,function(){
+        var a = this
+        var tmp
+        tmp = Math.ceil(parseInt(a,16)*(1+percent/100))
+        if (tmp>255) tmp = 255 
+        if (tmp < 0) tmp = 0 
+        tmp = tmp.toString(16)
+        for (i=0;i<2-tmp.length;i++){
+          tmp = '0' + tmp
+        }
+        comp = comp + tmp
+      })
+      return '#'+comp
+    }
+    var format_date = function(date){
+      var y = date.getFullYear(),
+          m = date.getMonth() + 1,
+          d = date.getDate();
+      if (m < 10) {m = "0"+m}
+      if (d < 10) {d = "0"+d}
+      return y+'/'+m+'/'+d;
+    }
+    var formate_datetime = function(date){
+      date = new Date(date)
+      return [format_date(date),format_time(date)]
+    }
+    $(window).resize(function(){
+      var window_w = $(window).width()
+      $('div.calendar-events').each(function(){
+        if ($(this).width()>=728 && window_w>=768){
+          if ($(this).css('width')!='50%'){
+            $(this).css('width','50%')
+            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
+          }
+        }else{
+          if ($(this).css('width')=='50%'){
+            $(this).css('width','100%')
+            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
+          }
+        }
+      })
+    })
+    var show_event = function(date,ele){
+      var date_split = date.split('-')
+      var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
+      event_div.find('.event-header').text(parseInt(date_split[2])+'/'+(parseInt(date_split[1])+1)+'/'+parseInt(date_split[0]))
+      event_div.find('.event-container').remove()
+      $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
+      $(ele).addClass('shown')
+      $.each(events[date],function(k,v){
+        var tp
+        if (v.url_linked==''){
+          var time_string = ''
+          if(v.allDay) {
+            var end_time
+            var start_time = formate_datetime(v.start)[0]
+            if(v.end)
+              end_time = formate_datetime(v.end)[0]
+            else
+              end_time = start_time
+            time_string = (start_time==end_time ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "")
+          }else{
+            var st = formate_datetime(v.start),
+                et = formate_datetime(v.end),
+                start_time = st[0],
+                end_time = et[0],
+                same = (start_time==end_time),
+                etime = et[1],
+                stime = st[1]
+            time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
+          }
+          var modal_tp = ('<div class="dialog_event" style="display: none;">' +
+                 '<div class="modal-header">' +
+                  '<h3>' + v.title + '</h3>' +
+                  '</div>' +
+                  '<div class="modal-body">' +
+                  '<div class="event_summary">' + time_string + '</div>' +
+                   v.note +
+                 '</div>' +
+               '</div>')
+          tp = $('<div class="event-container" onclick="var tmp=$(this).find(\'.dialog_event\').clone().dialog({dialogClass: \'calendar-dialog\'});$(\'.ui-dialog button\').blur();return false;"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div><div class="model-content"></div>'+modal_tp+'</div>')
+        }else{
+          tp = $('<a class="event-container"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div></a>').attr('href',v.url_linked)
+        }
+        var sd = formate_datetime(v.start),
+            ed = formate_datetime(v.end),
+            duration = '';
+        if(v.allDay){
+          if (sd[0]!=ed[0]){
+            duration = sd[0]+'>'+ed[0] +'<br>'
+          }
+        }else if (sd[0]==ed[0]){
+          duration = sd[1]+'>'+ed[1] +'<br>'
+        }else{
+          duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
+        }
+        tp.find('.event-info').html(duration+v.title+"<div class=\"event-content\">"+v.note+"</div>")
+        tp.find('.event-bullet-event').css('background',v.color)
+        event_div.find('.event-containers').append(tp)
+      })
+      
+      $(ele).parents('div[data-module="calendar"]').css('display','flex')
+      if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
+        event_div.css('width','50%')
+        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
+      }else{
+        event_div.css('width','100%')
+        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
+      }
+      event_div.show()
+      $('.close_box').off('click')
+      $('.close_box').on('click',function(){
+        hide_event(this)
+      })
+    }
+    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','')
+      event_div.hide()
+      //$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
+      event_div.find('.event-container').remove()
+    }
     var renderMonth = function(){
-        var num_of_rows = getNumberOfRows(year,month),
+        var num_of_rows = getNumberOfRows(),
             head_title = monthDom.find("h4 span.text"),
             table_body =  monthDom.find("table.table tbody");
         table_body.html("");
@@ -35,11 +192,10 @@
             }
             table_body.append(tr);
             head_title.text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
-        }
-          
+        }      
     }
 
-    var getNumberOfRows = function(year, month) {
+    var getNumberOfRows = function() {
         var day = 1,
             sat_counter = 0,
             sunday_counter = 0, 
@@ -62,41 +218,59 @@
             var row = $("<tr></tr>");
             switch (position){
                 case "first":
-                    for(var i = 0;i < 7;i++){
-                        var td = $("<td></td>");
-                        if(i >= firstDay.getDay()){
-                           if(today != 0 && last_inserted_date == today){
-                              td.attr("class","w-calendar-today");
-                            }
-                            td.text(last_inserted_date);
-                            td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
-                            last_inserted_date++;
-                        }
-                        row.append(td);
+                  var first_line_first_day = new Date(year,month,firstDay.getDate()-firstDay.getDay())
+                  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()
+                  for(var i = 0;i < 7;i++){
+                    var td = $("<td><div></div></td>");
+                    if(i >= firstDay.getDay()){
+                      if(today != 0 && last_inserted_date == today){
+                        td.addClass("w-calendar-today");
+                      }
+                      td.find('div').text(last_inserted_date);
+                      td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
+                      last_inserted_date++;
+                    }else{
+                      td.find('div').text(first_line_first_date+i)
+                      td.attr("data-date-node",(first_line_first_date+i)+"-"+first_line_first_month+"-"+first_line_first_year);
+                      td.addClass("w-calendar-other-month")
                     }
+                    row.append(td);
+                  }
                 break;
                 case "middle":
                     for(var i = 0;i < 7;i++){
-                        var td = $("<td></td>");
+                        var td = $("<td><div></div></td>");
                         if(today != 0 && last_inserted_date == today){
                           td.attr("class","w-calendar-today");
                         }
-                        td.text(last_inserted_date);
+                        td.find('div').text(last_inserted_date);
                         td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
                         last_inserted_date++;
                         row.append(td);
                     }
                 break;
                 case "last":
+                    var next_month = month+1,
+                        next_year = year;
+                    if (next_month==12){
+                      next_month = 0;
+                      next_year = next_year + 1; 
+                    }
                     for(var i = 0;i < 7;i++){
-                        var td = $("<td></td>");
+                        var td = $("<td><div></div></td>");
                         if(i <= lastDay.getDay()){
-                            if(today != 0 && last_inserted_date == today){
-                              td.attr("class","w-calendar-today");
-                            }
-                            td.text(last_inserted_date);
-                            td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
-                            last_inserted_date++;
+                          if(today != 0 && last_inserted_date == today){
+                            td.attr("class","w-calendar-today");
+                          }
+                          td.find('div').text(last_inserted_date);
+                          td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
+                          last_inserted_date++;
+                        }else{
+                          td.find('div').text(i-lastDay.getDay())
+                          td.attr("data-date-node",(i-lastDay.getDay())+"-"+next_month+"-"+next_year);
+                          td.addClass("w-calendar-other-month")
                         }
                         row.append(td);
                     }
@@ -107,33 +281,60 @@
         }
         return row;
     }
-
+    function toggle_event(ele,type){
+      $(ele).parents('.month_template').find('td').removeClass('w-calendar-toggle')
+      if ($(ele).length==1){
+        $(ele).addClass('w-calendar-toggle')
+        toggle_data = $(ele).data('date-node')
+      }
+      var toggle_month = $(ele).data('date-node').split('-')[1]
+      if (toggle_month==month || $(ele).length!=1){
+        if (type=='show'){
+          show_event($(ele).data('date-node'),ele)
+        }else{
+          hide_event(ele)
+        }  
+      }
+      else if(toggle_month==month+1 || toggle_month==0){
+        nextMonthFunc(toggle_data)
+      }else{
+        prevMonthFunc(toggle_data)
+      }
+    }
     var fetchEvents = function(){
       var usd = Math.round(firstDay/1000),
           ued = Math.round(lastDay/1000);
       $.ajax({
         url : "/xhr/calendars/agenda",
-        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid},
+        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
         dataType : "json",
         type : "get"
       }).done(function(data){
+        events = {}
+        $(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title'])
         $.each(data.events,function(index,eve){
           var sd = new Date(eve.start),
               ed = new Date(eve.end),
-              timeDiff = Math.abs(ed.getTime() - sd.getTime()),
-              dayDiff = Math.ceil(timeDiff / (1000 * 3600 * 24)); 
-          if(eve.allDay){
-            dayDiff = 1 ;
+              sd_date = new Date(formate_datetime(eve.start)[0]),
+              ed_date = new Date(formate_datetime(eve.end)[0]),
+              timeDiff = ed_date.getTime() - sd_date.getTime(),
+              dayDiff = Math.round(timeDiff / (1000 * 3600 * 24));
+          if(eve.allDay && dayDiff < 1){
+            dayDiff = 1
           }
           if(dayDiff > 0){
-            var inserting_date = (sd < firstDay ? 1 : sd.getDate());
-            for(i = 0;i <= dayDiff; i++){
+            var inserting_date = sd.getDate();
+            for(var i = 0;i <= dayDiff; i++){
               var dt = inserting_date + "-" + month + "-" + year,
                   td = dom.find("td[data-date-node=" + dt + "]");
+              if (events[dt]==undefined){
+                events[dt]=[]
+              }
+              events[dt].push(eve)
               td.addClass("w-calendar-event");
-              if(index_url != ""){
-                td.on("click",function(){
-                  window.location.href = "http://" + window.location.host + index_url + '/' + eve.id + '-';
+              if(events[dt].length==1){
+                td.click(function(){
+                  toggle_event(this,'show')
                 })
               }
               inserting_date++;
@@ -144,21 +345,52 @@
           }else{
             var dt = sd.getDate() + "-" + sd.getMonth() + "-" + sd.getFullYear();
                 td = dom.find("td[data-date-node=" + dt + "]");
+            if (events[dt]==undefined){
+              events[dt]=[]
+            }
+            events[dt].push(eve)
+            if(events[dt].length==1){
+              td.click(function(){
+                toggle_event(this,'show')
+              })
+            }
             td.addClass("w-calendar-event");
           }
         })
+        if (!toggle_data){
+          if (dom.find('td.w-calendar-today').length != 0){
+            toggle_event(dom.find('td.w-calendar-today'),'show')
+          }else{
+            toggle_event(dom.find('td'),'hide')
+          }
+        }
+        dom.find('td:not(td.w-calendar-event)').click(function(){
+          toggle_event(this,'hide')
+        })
+        var clicked_color = dom.find('.w-calendar-event').css('background-color')
+        if (clicked_color){
+          clicked_color = lighten_color(rgb2hex(clicked_color),-20)
+          if (clicked_color!='#000000'){
+            dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
+          }
+        }
         monthDom.find("i.loading").addClass("hide");
       })
     }
 
     this.currentMonth = function(){
       renderMonth();
-      dom.html(monthDom);
+      var div_tag = $('<div></div>')
+      var widge_title = dom.find('.w-calendar-title').eq(0)
+      div_tag.html(monthDom)
+      div_tag.prepend(widge_title)
+      dom.html(div_tag);
       monthDom.find("i.loading").removeClass("hide");
       fetchInterval = setTimeout(fetchEvents,300);
+      dom.find('div').eq(0).after(eventHTML)
     }
 
-    this.nextMonth = function(){
+    this.nextMonth = function(toggle_flag){
       clearTimeout(fetchInterval);
       monthDom.find("i.loading").removeClass("hide");
       month++;
@@ -172,10 +404,15 @@
       last_inserted_date = 1;
       renderMonth();
       dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (toggle_data && toggle_flag){
+        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+      }else{
+        toggle_data = undefined
+      }
       fetchInterval = setTimeout(fetchEvents,1000);
     }
-
-    this.prevMonth = function(){
+    nextMonthFunc = this.nextMonth;
+    this.prevMonth = function(toggle_flag){
       clearTimeout(fetchInterval);
       monthDom.find("i.loading").removeClass("hide");
       month--;
@@ -189,19 +426,12 @@
       last_inserted_date = 1;
       renderMonth();
       dom.find("table.w-calendar-table tbody").html(monthDom.find("tbody").html());
+      if (toggle_data && toggle_flag){
+        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+      }else{
+        toggle_data = undefined
+      }
       fetchInterval = setTimeout(fetchEvents,1000);
-
     }
-}
-
-
-
-
-
-
-
-
-
-
-
-
+    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
new file mode 100644
index 0000000..f663bb7
--- /dev/null
+++ b/app/assets/javascripts/calendar_widget2.js
@@ -0,0 +1,437 @@
+ var CalendarModuleMonth = function(date,dom,subpart,url){
+    _this = this;
+    var events = {}
+    var template = dom.find(".month_template"),
+        month_names = ["Jan","Feb","March","April","May","June","July","Aug","Sep","Oct","Nov","Dec"],
+        monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'],
+        initialDate = date,
+        subpartid = subpart,
+        index_url = url,
+        fetchInterval = null,
+        month = date.getMonth(),
+        year = date.getFullYear(),
+        firstDay = new Date(year,month,1),
+        lastDay = new Date(year,month+1,0),
+        today = date.getDate(),
+        last_inserted_date = 1,
+        monthDom = $("<div data-year='"+year+"' data-month='"+month+"'></div>"),
+        eventHTML = dom.find('div.calendar-events')[0],
+        prevMonthFunc,
+        nextMonthFunc,
+        toggle_data;
+    monthDom.html(template);
+    var format_time = function(date){
+      var hours   = date.getHours(),
+          minutes = date.getMinutes();
+      if (hours   < 10) {hours   = "0"+hours}
+      if (minutes < 10) {minutes = "0"+minutes}
+      return hours+':'+minutes;
+    }
+    function rgb2hex(rgb) {
+      rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+      function hex(x) {
+        return ("0" + parseInt(x).toString(16)).slice(-2);
+      }
+      if (rgb){
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+      }else{
+        return "#000000";
+      }
+    }
+    function lighten_color(my_hex,percent){
+      if (my_hex[0] == '#'){
+        my_hex = my_hex.slice(1,-1)
+      }
+      var comp = ''
+      var rgb = []
+      var batch_size = Math.ceil(my_hex.length/3)
+      for (i=0;i<3;i++){
+        rgb.push(my_hex.slice(batch_size*i,batch_size*(i+1)))
+      }
+      $.each(rgb,function(){
+        var a = this
+        var tmp
+        tmp = Math.ceil(parseInt(a,16)*(1+percent/100))
+        if (tmp>255) tmp = 255 
+        if (tmp < 0) tmp = 0 
+        tmp = tmp.toString(16)
+        for (i=0;i<2-tmp.length;i++){
+          tmp = '0' + tmp
+        }
+        comp = comp + tmp
+      })
+      return '#'+comp
+    }
+    var format_date = function(date){
+      var y = date.getFullYear(),
+          m = date.getMonth() + 1,
+          d = date.getDate();
+      if (m < 10) {m = "0"+m}
+      if (d < 10) {d = "0"+d}
+      return y+'/'+m+'/'+d;
+    }
+    var formate_datetime = function(date){
+      date = new Date(date)
+      return [format_date(date),format_time(date)]
+    }
+    $(window).resize(function(){
+      var window_w = $(window).width()
+      $('div.calendar-events').each(function(){
+        if ($(this).width()>=728 && window_w>=768){
+          if ($(this).css('width')!='50%'){
+            $(this).css('width','50%')
+            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
+          }
+        }else{
+          if ($(this).css('width')=='50%'){
+            $(this).css('width','100%')
+            $(this).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
+          }
+        }
+      })
+    })
+    var show_event = function(date,ele){
+      var date_split = date.split('-')
+      var event_div = $(ele).parents('div[data-module="calendar"]').find('div.calendar-events')
+      event_div.find('.event-header').text(parseInt(date_split[2])+'/'+(parseInt(date_split[1])+1)+'/'+parseInt(date_split[0]))
+      event_div.find('.event-container').remove()
+      $(ele).parents('.w-calendar').find('td.shown').removeClass('shown')
+      $(ele).addClass('shown')
+      $.each(events[date],function(k,v){
+        var tp
+        if (v.url_linked==''){
+          var time_string = ''
+          if(v.allDay) {
+            var end_time
+            var start_time = formate_datetime(v.start)[0]
+            if(v.end)
+              end_time = formate_datetime(v.end)[0]
+            else
+              end_time = start_time
+            time_string = (start_time==end_time ? "<p class='start-date'><i class='icons-calendar' /> " + start_time + "</p>" : "<i class='icons-calendar' /> " + start_time + " <i class='icons-arrow-right-5' /> " + end_time + "")
+          }else{
+            var st = formate_datetime(v.start),
+                et = formate_datetime(v.end),
+                start_time = st[0],
+                end_time = et[0],
+                same = (start_time==end_time),
+                etime = et[1],
+                stime = st[1]
+            time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
+          }
+          var modal_tp = ('<div class="dialog_event" style="display: none;">' +
+                 '<div class="modal-header">' +
+                  '<h3>' + v.title + '</h3>' +
+                  '</div>' +
+                  '<div class="modal-body">' +
+                  '<div class="event_summary">' + time_string + '</div>' +
+                   v.note +
+                 '</div>' +
+               '</div>')
+          tp = $('<div class="event-container" onclick="var tmp=$(this).find(\'.dialog_event\').clone().dialog({dialogClass: \'calendar-dialog\'});$(\'.ui-dialog button\').blur();return false;"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div><div class="model-content"></div>'+modal_tp+'</div>')
+        }else{
+          tp = $('<a class="event-container"><div class="event-icon"><div class="event-bullet-event"></div></div><div class="event-info"></div></a>').attr('href',v.url_linked)
+        }
+        var sd = formate_datetime(v.start),
+            ed = formate_datetime(v.end),
+            duration = '';
+        if(v.allDay){
+          if (sd[0]!=ed[0]){
+            duration = sd[0]+'>'+ed[0] +'<br>'
+          }
+        }else if (sd[0]==ed[0]){
+          duration = sd[1]+'>'+ed[1] +'<br>'
+        }else{
+          duration = sd[0]+' '+sd[1]+'>'+ed[0]+' '+ed[1] +'<br>'
+        }
+        tp.find('.event-info').html(duration+v.title+"<div class=\"event-content\">"+v.note+"</div>")
+        tp.find('.event-bullet-event').css('background',v.color)
+        event_div.find('.event-containers').append(tp)
+      })
+      
+      $(ele).parents('div[data-module="calendar"]').css('display','flex')
+      if ($(ele).parents('div[data-module="calendar"]').width()>=728 && $(window).width()>=768){
+        event_div.css('width','50%')
+        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','50%')
+      }else{
+        event_div.css('width','100%')
+        $(ele).parents('div[data-module="calendar"]').find('div').eq(0).css('width','100%')
+      }
+      event_div.show()
+      $('.close_box').off('click')
+      $('.close_box').on('click',function(){
+        hide_event(this)
+      })
+    }
+    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','')
+      event_div.hide()
+      //$(ele).parents('div[data-module="calendar"]').find('td.w-calendar-toggle').removeClass('w-calendar-toggle')
+      event_div.find('.event-container').remove()
+    }
+    var renderMonth = function(){
+        var num_of_rows = getNumberOfRows(),
+            head_title = monthDom.find("h4 span.text"),
+            table_body =  monthDom.find("table.table tbody");
+        table_body.html("");
+
+        for(var i = 0; i < num_of_rows; i++){
+            var tr = null;
+            if(i == 0){
+                tr = makeRow("first");
+            }else if(i == (num_of_rows - 1)){
+                tr = makeRow("last");
+            }else{
+                tr = makeRow("middle");
+            }
+            if(tr == null){
+                break;
+            }
+            table_body.append(tr);
+            head_title.text(monthNames[firstDay.getMonth()] + " " + firstDay.getFullYear());
+        }      
+    }
+
+    var getNumberOfRows = function() {
+        var day = 1,
+            sat_counter = 0,
+            sunday_counter = 0, 
+            date = new Date(year, month, day);
+
+        while(date.getMonth() === month) {
+            if(date.getDay() === 0) {
+                sunday_counter++;
+            }else if(date.getDay() === 6) {
+                sat_counter++;
+            }
+            day++;
+            date = new Date(year, month, day);
+        }
+        return (sunday_counter == 5 && sat_counter == 5 ? 6 : 5);
+    }
+
+    var makeRow = function(position){
+        if(last_inserted_date <= lastDay.getDate()){
+            var row = $("<tr></tr>");
+            switch (position){
+                case "first":
+                  var first_line_first_day = new Date(year,month,firstDay.getDate()-firstDay.getDay())
+                  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()
+                  for(var i = 0;i < 7;i++){
+                    var td = $("<td><div></div></td>");
+                    if(i >= firstDay.getDay()){
+                      if(today != 0 && last_inserted_date == today){
+                        td.addClass("w-calendar-today");
+                      }
+                      td.find('div').text(last_inserted_date);
+                      td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
+                      last_inserted_date++;
+                    }else{
+                      td.find('div').text(first_line_first_date+i)
+                      td.attr("data-date-node",(first_line_first_date+i)+"-"+first_line_first_month+"-"+first_line_first_year);
+                      td.addClass("w-calendar-other-month")
+                    }
+                    row.append(td);
+                  }
+                break;
+                case "middle":
+                    for(var i = 0;i < 7;i++){
+                        var td = $("<td><div></div></td>");
+                        if(today != 0 && last_inserted_date == today){
+                          td.attr("class","w-calendar-today");
+                        }
+                        td.find('div').text(last_inserted_date);
+                        td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
+                        last_inserted_date++;
+                        row.append(td);
+                    }
+                break;
+                case "last":
+                    var next_month = month+1,
+                        next_year = year;
+                    if (next_month==12){
+                      next_month = 0;
+                      next_year = next_year + 1; 
+                    }
+                    for(var i = 0;i < 7;i++){
+                        var td = $("<td><div></div></td>");
+                        if(i <= lastDay.getDay()){
+                          if(today != 0 && last_inserted_date == today){
+                            td.attr("class","w-calendar-today");
+                          }
+                          td.find('div').text(last_inserted_date);
+                          td.attr("data-date-node",last_inserted_date+"-"+firstDay.getMonth()+"-"+firstDay.getFullYear());
+                          last_inserted_date++;
+                        }else{
+                          td.find('div').text(i-lastDay.getDay())
+                          td.attr("data-date-node",(i-lastDay.getDay())+"-"+next_month+"-"+next_year);
+                          td.addClass("w-calendar-other-month")
+                        }
+                        row.append(td);
+                    }
+                break;
+            }
+        }else{
+            var row = null;
+        }
+        return row;
+    }
+    function toggle_event(ele,type){
+      $(ele).parents('.month_template').find('td').removeClass('w-calendar-toggle')
+      if ($(ele).length==1){
+        $(ele).addClass('w-calendar-toggle')
+        toggle_data = $(ele).data('date-node')
+      }
+      var toggle_month = $(ele).data('date-node').split('-')[1]
+      if (toggle_month==month || $(ele).length!=1){
+        if (type=='show'){
+          show_event($(ele).data('date-node'),ele)
+        }else{
+          hide_event(ele)
+        }  
+      }
+      else if(toggle_month==month+1 || toggle_month==0){
+        nextMonthFunc(toggle_data)
+      }else{
+        prevMonthFunc(toggle_data)
+      }
+    }
+    var fetchEvents = function(){
+      var usd = Math.round(firstDay/1000),
+          ued = Math.round(lastDay/1000);
+      $.ajax({
+        url : "/xhr/calendars/agenda",
+        data : {"unix_start" : usd, "unix_end" : ued, "subpart_id" : subpartid, "locale" : $('html').attr('lang')},
+        dataType : "json",
+        type : "get"
+      }).done(function(data){
+        events = {}
+        $(dom).find('.w-calendar-title span').eq(-1).html(data['calendar_title'])
+        $.each(data.events,function(index,eve){
+          var sd = new Date(eve.start),
+              ed = new Date(eve.end),
+              sd_date = new Date(formate_datetime(eve.start)[0]),
+              ed_date = new Date(formate_datetime(eve.end)[0]),
+              timeDiff = ed_date.getTime() - sd_date.getTime(),
+              dayDiff = Math.round(timeDiff / (1000 * 3600 * 24));
+          if(eve.allDay && dayDiff < 1){
+            dayDiff = 1
+          }
+          if(dayDiff > 0){
+            var inserting_date = sd.getDate();
+            for(var i = 0;i <= dayDiff; i++){
+              var dt = inserting_date + "-" + month + "-" + year,
+                  td = dom.find("td[data-date-node=" + dt + "]");
+              if (events[dt]==undefined){
+                events[dt]=[]
+              }
+              events[dt].push(eve)
+              td.addClass("w-calendar-event");
+              if(events[dt].length==1){
+                td.click(function(){
+                  toggle_event(this,'show')
+                })
+              }
+              inserting_date++;
+              if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){
+                break;
+              }
+            }
+          }else{
+            var dt = sd.getDate() + "-" + sd.getMonth() + "-" + sd.getFullYear();
+                td = dom.find("td[data-date-node=" + dt + "]");
+            if (events[dt]==undefined){
+              events[dt]=[]
+            }
+            events[dt].push(eve)
+            if(events[dt].length==1){
+              td.click(function(){
+                toggle_event(this,'show')
+              })
+            }
+            td.addClass("w-calendar-event");
+          }
+        })
+        if (!toggle_data){
+          if (dom.find('td.w-calendar-today').length != 0){
+            toggle_event(dom.find('td.w-calendar-today'),'show')
+          }else{
+            toggle_event(dom.find('td'),'hide')
+          }
+        }
+        dom.find('td:not(td.w-calendar-event)').click(function(){
+          toggle_event(this,'hide')
+        })
+        var clicked_color = dom.find('.w-calendar-event').css('background-color')
+        if (clicked_color){
+          clicked_color = lighten_color(rgb2hex(clicked_color),-20)
+          if (clicked_color!='#000000'){
+            dom.find('table').append($('<style>.w-calendar-table .w-calendar-toggle{ background-color:'+clicked_color+';color: white;}</style>'))
+          }
+        }
+        monthDom.find("i.loading").addClass("hide");
+      })
+    }
+
+    this.currentMonth = function(){
+      renderMonth();
+      var div_tag = $('<div></div>')
+      var widge_title = dom.find('.w-calendar-title').eq(0)
+      div_tag.html(monthDom)
+      div_tag.prepend(widge_title)
+      dom.html(div_tag);
+      monthDom.find("i.loading").removeClass("hide");
+      fetchInterval = setTimeout(fetchEvents,300);
+      dom.find('div').eq(0).after(eventHTML)
+    }
+
+    this.nextMonth = function(toggle_flag){
+      clearTimeout(fetchInterval);
+      monthDom.find("i.loading").removeClass("hide");
+      month++;
+      if(month == 12){
+        year++;
+        month = 0;
+      }
+      firstDay = new Date(year,month,1);
+      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());
+      if (toggle_data && toggle_flag){
+        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+      }else{
+        toggle_data = undefined
+      }
+      fetchInterval = setTimeout(fetchEvents,1000);
+    }
+    nextMonthFunc = this.nextMonth;
+    this.prevMonth = function(toggle_flag){
+      clearTimeout(fetchInterval);
+      monthDom.find("i.loading").removeClass("hide");
+      month--;
+      if(month == -1){
+        year--;
+        month = 11;
+      }
+      firstDay = new Date(year,month,1);
+      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());
+      if (toggle_data && toggle_flag){
+        toggle_event(dom.find('td[data-date-node="'+toggle_data+'"]'),'show')
+      }else{
+        toggle_data = undefined
+      }
+      fetchInterval = setTimeout(fetchEvents,1000);
+    }
+    prevMonthFunc = this.prevMonth;
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/fullcalendar.js b/app/assets/javascripts/fullcalendar.js
index 2c9989a..eb4cd2f 100644
--- a/app/assets/javascripts/fullcalendar.js
+++ b/app/assets/javascripts/fullcalendar.js
@@ -1176,7 +1176,9 @@ function EventManager(options, _sources) {
 	
 	/* Event Normalization
 	-----------------------------------------------------------------------------*/
-	
+	function addMinutes(date, minutes) {
+	  return new Date(date.getTime() + minutes*60000);
+	}
 	
 	function normalizeEvent(event) {
 		var source = event.source || {};
@@ -1191,7 +1193,7 @@ function EventManager(options, _sources) {
 		event._start = cloneDate(event.start = parseDate(event.start, ignoreTimezone));
 		event.end = parseDate(event.end, ignoreTimezone);
 		if (event.end && event.end < event.start) {
-			event.end = event.start;
+			event.end = addMinutes(event.start,1);
 		}
 		event._end = event.end ? cloneDate(event.end) : null;
 		if (event.allDay === undefined) {
diff --git a/app/assets/stylesheets/calendar_widget1.css b/app/assets/stylesheets/calendar_widget1.css
new file mode 100644
index 0000000..9fb5796
--- /dev/null
+++ b/app/assets/stylesheets/calendar_widget1.css
@@ -0,0 +1,98 @@
+a.event-container{
+    color: inherit;
+}
+.event-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    border-radius: 10px;
+    margin-bottom: 1em;
+    transition: all .3s ease;
+    cursor: pointer;
+    padding: 0.5em;
+    min-height: 3em;
+    position: relative;
+}
+.close_box{
+    font-weight: bold;
+    position: relative;
+    float: right;
+    padding: 0.5em;
+    cursor: pointer;
+}
+.close_box:hover{
+    color: red;
+}
+.event-bullet-event {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+.event-bullet-event {
+    width: 2em;
+    height: 2em;
+    border-radius: 1em;
+}
+.event-container:hover {
+    background-color: #fff;
+    box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
+}
+.event-container > .event-icon {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 15%;
+    height: 100%;
+    z-index: 5;
+}
+.event-container > .event-icon::before {
+    content: '';
+    position: absolute;
+    top: 1em;
+    left: 50%;
+    width: 0.1em;
+    height: calc(100% + 1.5em);
+    background-color: #eaeaea;
+    z-index: -1;
+}
+.event-container:first-child > .event-icon::before {
+    top: 1.5em;
+    position: absolute;
+}
+.event-container:last-child > .event-icon::before {
+    height: 0;
+}
+.event-container:only-child > .event-icon::before {
+    background-color: unset;
+}
+.event-header{
+    width: 100%;
+    text-align: center;
+    font-size: 1.7em;
+    font-weight: bold;
+    padding: 0.35em 0;
+}
+.event-info{
+    padding-left: 15%;
+}
+.calendar-events{
+    position: relative;
+    background: #fbfbfb;
+}
+.month_template{
+    position: relative;
+}
+.w-calendar.widget-calendar-1{
+    flex-wrap: wrap;
+    margin-top: 2em;
+}
+.widget-calendar-1 .w-calendar-nav a {
+    top: 2em;
+}
+.calendar-dialog div.ui-dialog-content {
+    max-height: 20em !important;
+    overflow-wrap: break-word;
+}
+.widget-calendar-1 td{
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/calendar_widget2.css b/app/assets/stylesheets/calendar_widget2.css
new file mode 100644
index 0000000..8d76e6a
--- /dev/null
+++ b/app/assets/stylesheets/calendar_widget2.css
@@ -0,0 +1,145 @@
+a.event-container{
+    color: inherit;
+}
+.event-container {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    border-radius: 10px;
+    margin-bottom: 1em;
+    transition: all .3s ease;
+    cursor: pointer;
+    padding: 0.5em;
+    min-height: 3em;
+    position: relative;
+}
+.close_box{
+    font-weight: bold;
+    position: relative;
+    float: right;
+    padding: 0.5em;
+    cursor: pointer;
+}
+.close_box:hover{
+    color: red;
+}
+.event-bullet-event {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+}
+.event-bullet-event {
+    width: 2em;
+    height: 2em;
+    border-radius: 1em;
+}
+.event-container:hover {
+    background-color: #fff;
+    box-shadow: 0 0.1em 0.7em -0.25em rgba(0, 0, 0, 0.65);
+}
+.event-container > .event-icon {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    width: 15%;
+    height: 100%;
+    z-index: 5;
+}
+.event-container > .event-icon::before {
+    content: '';
+    position: absolute;
+    top: 1em;
+    left: 50%;
+    width: 0.1em;
+    height: calc(100% + 1.5em);
+    background-color: #eaeaea;
+    z-index: -1;
+}
+.event-container:first-child > .event-icon::before {
+    top: 1.5em;
+    position: absolute;
+}
+.event-container:last-child > .event-icon::before {
+    height: 0;
+}
+.event-container:only-child > .event-icon::before {
+    background-color: unset;
+}
+.event-header{
+    width: 100%;
+    text-align: center;
+    font-size: 1.7em;
+    font-weight: bold;
+    padding: 0.35em 0;
+}
+.event-info{
+    padding-left: 15%;
+}
+.calendar-events{
+    position: relative;
+    background: #fbfbfb;
+}
+.month_template{
+    position: relative;
+}
+.w-calendar.widget-calendar-2{
+    flex-wrap: wrap;
+    margin-top: 2em;
+}
+.widget-calendar-2 .w-calendar-table td:hover {
+    background-color: #eaeaea;
+    color: #333;
+}
+.widget-calendar-2 .w-calendar-table td {
+    background: inherit;
+    color: inherit;
+    cursor: pointer;
+    border: 0;
+}
+.widget-calendar-2 .w-calendar-table td div{
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    width: 3em;
+    height: 3em;
+}
+.widget-calendar-2 .w-calendar-table th {
+    background: unset;
+    color: unset;
+    border: 0;
+    width: 3em;
+    height: 3em;
+}
+.widget-calendar-2.w-calendar .widget-title {
+    padding: 0.2em;
+    font-size: 1.5em;
+}
+.widget-calendar-2 table.w-calendar-table td.w-calendar-toggle div {
+    background: #6f0007;
+    border-radius: 1.5em;
+    color: white;
+}
+.widget-calendar-2 .w-calendar-table td.w-calendar-event div{
+    border: 1px #6f0007 solid;
+    background: #eee;
+    border-radius: 1.5em;
+}
+.widget-calendar-2 .w-calendar-title{
+    background: rgb(146, 8, 17);
+    color: rgb(255, 255, 255);
+    padding: 0px 10%;
+    display: flex;
+    flex-flow: row-reverse wrap;
+    line-height: 2em;
+    justify-content: space-between;
+    font-size: 1.85em;
+    width: 100%;
+}
+.calendar-dialog div.ui-dialog-content {
+    max-height: 20em !important;
+    overflow-wrap: break-word;
+}
+.widget-calendar-2 table td.w-calendar-other-month {
+    color: #999797;
+}
\ No newline at end of file
diff --git a/app/controllers/admin/calendars_controller.rb b/app/controllers/admin/calendars_controller.rb
index 92971b7..c41adb3 100644
--- a/app/controllers/admin/calendars_controller.rb
+++ b/app/controllers/admin/calendars_controller.rb
@@ -14,7 +14,7 @@ class Admin::CalendarsController < OrbitAdminController
       sdt = Time.at(params[:start].to_i)
       edt = Time.at(params[:end].to_i)
       @monthly_events = Event.monthly_event(sdt,edt).with_categories(filters("category"))
-                                                    .with_tags(filters("tag"))
+                                                    .with_tags(filters("tag")).convert_front
       @re = Event.with_categories(filters("category")).with_tags(filters("tag")).recurring_event(sdt,edt)
       allevents = @monthly_events.inject(@re, :<<)
       events = allevents.to_json
diff --git a/app/controllers/calendars_controller.rb b/app/controllers/calendars_controller.rb
index 4f55b80..19d9dac 100644
--- a/app/controllers/calendars_controller.rb
+++ b/app/controllers/calendars_controller.rb
@@ -22,11 +22,12 @@ class CalendarsController < ApplicationController
 
   def widget
     part = OrbitHelper.get_current_widget
-
     {
       "extras" => {
         "subpart-id" => part.id.to_s,
-        "more_url" => OrbitHelper.widget_more_url
+        "more_url" => OrbitHelper.widget_more_url,
+        'widget_title' => part.title,
+        'calendar_title' => get_calendar_title
       }
     }
   end
@@ -38,7 +39,7 @@ class CalendarsController < ApplicationController
       if params[:start].present? && params[:end].present?
         sdt = Time.at(params[:start].to_i)
         edt = Time.at(params[:end].to_i)
-        events = Event.monthly_event(sdt,edt)+Event.recurring_event(sdt,edt)
+        events = Event.monthly_event(sdt,edt).convert_front+Event.recurring_event(sdt,edt)
      end
     end
     respond_to do |format|
@@ -48,23 +49,30 @@ class CalendarsController < ApplicationController
   end
 
    def agenda
-    if !params[:subpart_id].nil?
-      subpartid = params[:subpart_id]
-      widget = SubPart.find(subpartid)
-      calendar_types = widget.custom_array_field
-    else
-      calendar_types = []
-    end
-    if params[:unix_start].present? && params[:unix_end].present?
-      agenda_start = Time.at(params[:unix_start].to_i).to_s
-      agenda_end = Time.at(params[:unix_end].to_i).to_s
-      if !calendar_types.blank?
-        events = Event.where(:calendar_type_id.in => calendar_types).agenda_events(agenda_start,agenda_end)
+    I18n.with_locale(params[:locale]||I18n.locale) do
+      if !params[:subpart_id].nil?
+        subpartid = params[:subpart_id]
+        widget = SubPart.find(subpartid)
+        calendar_types = widget.custom_array_field
       else
-        events = Event.agenda_events(agenda_start,agenda_end)
+        calendar_types = []
       end
+      if params[:unix_start].present? && params[:unix_end].present?
+        agenda_start = Time.at(params[:unix_start].to_i).to_s
+        agenda_end = Time.at(params[:unix_end].to_i).to_s
+        if !calendar_types.blank?
+          events = Event.where(:calendar_type_id.in => calendar_types).agenda_events(agenda_start,agenda_end)
+        else
+          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})
     end
-    render json: {"events" => events}.to_json({"frontend" => true})
+  end
+  def get_calendar_title(now_date=nil)
+    now_date = Time.now if now_date.nil?
+    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
 end
 
diff --git a/app/models/event.rb b/app/models/event.rb
index 2276c9d..debe478 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -19,11 +19,22 @@ class Event
   field :period
   field :create_user_id
   field :update_user_id
-  field :bulletin_id
+  field :module_key
+  field :model_cat
+  field :model_page_id
+  field :model_tags,type: Array,default: []
   belongs_to :calendar_type
+  field :url
+  def get_module_url
+    page = !self.model_page_id.blank? ? Page.find(self.model_page_id): Page.where(:module => self.module_key).where(:categories.in => Array(self.model_cat)+[[]],:tags.in=>Array(self.model_tags)+[[]]).first
+    page.nil? ? '' : (page.url+'/'+eval(self.model_class).where(:id=>self.model_id).first.to_param)
+  end
+  def url_to_fronted
+    self.url.blank? ? (self.model_class.blank? ? '' : self.get_module_url) : self.url
+  end
   attr_accessor :agenda_start, :agenda_end, :get_agenda_events
   
-  #let other model can connect to this model 
+  #let other model can connect to this model
   field :key
   field :model_class
   field :model_id
@@ -110,7 +121,14 @@ class Event
   end
 
   def self.monthly_event(start_date,end_date)
-    self.any_of(:start.gte => start_date, :end.gte => start_date).and(:start.lte => end_date).asc(:start)
+    self.any_of({:start.lte => start_date,:end.gte => start_date},{:start.gte => start_date,:end.lte => end_date},{:start.lte => end_date,:end.gte => end_date}).asc(:start)
+  end
+  def self.convert_front
+    self.all.collect do |re|
+      edit_url = Rails.application.routes.url_helpers.edit_admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
+      delete_url = Rails.application.routes.url_helpers.admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
+      {:id => re.id.to_s, :title=>re.title, :note=>re.note || "", :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url, :url_linked => re.url_to_fronted, :start => re.start, :end => re.end}
+    end
   end
   def self.get_diff_month(date1,date2)
     (date2.year-date1.year)*12+(date2.month-date1.month)
@@ -121,12 +139,14 @@ class Event
     @recurring_events.each do |re|
       edit_url = Rails.application.routes.url_helpers.edit_admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
       delete_url = Rails.application.routes.url_helpers.admin_calendar_path(:locale=>I18n.locale, :id=>re.id)
-      data = {:id => re.id.to_s, :title=>re.title, :note=>re.note, :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url}
+      data = {:id => re.id.to_s, :title=>re.title, :note=>re.note || "", :allDay => re.all_day, :recurring => re.recurring, :calendar => re.calendar_type.id.to_s, :color => re.calendar_type.color, :edit_url => edit_url, :delete_url => delete_url, :url_linked => re.url_to_fronted}
       case re.period
       when 'Daily'
-        days = (end_date.to_date-re.start.to_date)
+        days = (end_date.to_date-re.start.to_date).to_i
         freq = re.frequency.to_i
-        (1..days).each do |i|
+        start_key = (start_date.to_date-re.start.to_date).to_i
+        start_key = 1 if start_key<0
+        (start_key..days).each do |i|
           if i%freq==0
             @start_date = re.start + i
             @end_date = re.end + i
@@ -136,7 +156,7 @@ class Event
       when "Weekly"
           @start_date = re.start
           @end_date = re.end
-          @i = TimeDifference.between(re.start,end_date).in_weeks.to_i
+          @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)
             @end_date += (7*re.frequency.to_i)
@@ -150,10 +170,12 @@ class Event
           start_datetime = start_date.to_datetime
           months = self.get_diff_month(sd,start_datetime)..self.get_diff_month(sd,end_datetime)
           months.each do |diff_month|
-            if (diff_month%re.frequency.to_i)==0
+            if (diff_month%re.frequency.to_i)==0 
               sd_tp = sd + diff_month.month
               ed_tp = ed + diff_month.month
-              @recurring << data.merge({:start => sd_tp, :end => ed_tp})
+              if sd_tp>start_date
+                @recurring << data.merge({:start => sd_tp, :end => ed_tp})
+              end
             end
           end
         end
@@ -163,7 +185,7 @@ class Event
           ed = re.end
           start_datetime = start_date.to_datetime
           end_datetime = end_date.to_datetime
-          if start_datetime>sd
+          if start_datetime>sd && start_datetime.year != sd.year
             ((start_datetime.year-sd.year)..(end_datetime.year-sd.year)).each do |year_diff|
               if (year_diff%re.frequency.to_i)==0
                 sd_tp = sd + year_diff.year
@@ -181,7 +203,7 @@ class Event
 
   def self.agenda_events(agenda_start, agenda_end)
     recurring = self.recurring_event(agenda_start,agenda_end)
-    events = self.any_of(:start.gte => agenda_start).or(:end.gte => agenda_start).and(:start.lte => agenda_end).asc(:start)
+    events = self.monthly_event(agenda_start, agenda_end).convert_front
     all_events = recurring.concat(events)
     recurring
   end
diff --git a/app/views/admin/calendars/_form.html.erb b/app/views/admin/calendars/_form.html.erb
index d1af419..eb92edb 100644
--- a/app/views/admin/calendars/_form.html.erb
+++ b/app/views/admin/calendars/_form.html.erb
@@ -36,6 +36,12 @@
     <%= f.text_area :note, :rows => 3 %>
   </div>
 </div>
+<div class="control-group">
+  <%= f.label t("url"), :class=>"control-label" %>
+  <div class="controls">
+    <%= f.text_field :url %>
+  </div>
+</div>
 <div class="control-group">
   <label class="control-label"></label>
   <div class="controls">
@@ -44,35 +50,19 @@
     </label>
   </div>
 </div>
+<% data_format = (@event.all_day || @event.new_record?) ? 'yyyy/MM/dd' : 'yyyy/MM/dd hh:mm' %>
 <div class="control-group">
   <%= f.label t("start_date"), :class=>"control-label" %>
   <%#= f.datetime_select :start %>
   <div class="controls">
-    <div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick">
-      <%= f.text_field :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => 'YYYY/MM/DD',:value => @start_d_t %>
-      <span class="add-on clearDate">
-          <i class="icons-cross-3"></i>
-      </span>
-      <span class="add-on iconbtn">
-          <i data-time-icon="icons-clock" data-date-icon="icons-calendar"></i>
-      </span>
-    </div>
+    <%= f.datetime_picker :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => data_format, :new_record => @event.new_record?, :format => data_format %>
   </div>
 </div>
 <div class="control-group">
   <%= f.label t("end_date"), :class=>"control-label" %>
   <%#= f.datetime_select :end %>
   <div class="controls">
-    <div data-date-format="yyyy/MM/dd hh:mm" data-language="en" data-picktime="true" class="input-append datetimepick">
-      <%= f.text_field :end, :class => "input-large", :placeholder => 'YYYY/MM/DD', :value => @end_d_t %>
-      <!-- <input type="text" placeholder="YYYY/MM/DD" class="input-large" name="event[end]"></input> -->
-      <span class="add-on clearDate">
-          <i class="icons-cross-3"></i>
-      </span>
-      <span class="add-on iconbtn">
-          <i data-time-icon="icons-clock" data-date-icon="icons-calendar"></i>
-      </span>
-    </div>
+    <%= f.datetime_picker :end, :class => "input-large", :placeholder => data_format, :new_record => @event.new_record?, :format=> data_format %>
   </div>
 </div>
 <div class="control-group">
@@ -120,3 +110,86 @@
     <a href="" class="btn btn-close">Cancel</a>
   </div>
 </div>
+<script type="text/javascript">
+  $('body').ready(function(){
+    if ($('.default_picker,.time_picker,.date_picker').find('input').length!=0){
+      $('.default_picker,.time_picker,.date_picker').find('.iconbtn').css('display','none')
+      $('.default_picker,.date_picker').each(function(i,v){
+        v = $(v).find('input')[0]
+        $(v).attr('autocomplete','off')
+        var org_format = $(v).data('format')
+        var format = org_format.toLowerCase().replace(/yyyy/,'yy')
+        var H_flag = false
+        if (org_format.search(/tt|H/)!= null ){
+          H_flag = true
+        }
+        var M_flag = false
+        if (org_format.match(/[hH].*M/)!=null){
+          M_flag = true
+        }
+        if (format.search(/h/)!= -1){
+          var result = format.match(/\W+[?=h]/)
+          if (result == null){
+            result = format.match(/h/)
+          }
+          var indice = result.index
+          var dateformat = format.slice(0,8)
+          var time_format_start = format.search(/h/)
+          var time_format = format.slice(time_format_start)
+          if (H_flag){
+            time_format = time_format.replace(/h/g,'H')
+          }
+          if (M_flag){
+            time_format = time_format.replace(/m/g,'M')
+          }
+          $(v).ui_datetimepicker({
+            dateFormat: dateformat,
+            controlType: 'select',
+            timeInput: true,
+            oneLine: true,
+            timeFormat: time_format
+            })
+        }else{
+          var show_view = ''
+          if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='m'){
+            show_view = 'month'
+          }
+          if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='y'){
+            show_view = 'year'
+          }
+          $(v).ui_datepicker({dateFormat: format,show_view: show_view})
+        }
+      })
+      $('.default_picker,.time_picker,.date_picker').find('.clearDate').click(function(){
+        $(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').val('')
+        $(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').trigger('change')
+      })
+      $('.time_picker input').each(function(i,v){
+        $(v).ui_timepicker({timeFormat: $(v).data('format'),
+          controlType: 'select',
+            timeInput: true,
+            oneLine: true})
+      })
+      $('.separated_picker').find('.date_picker,.time_picker').find('input').change(function(){
+        var parent_div = $(this).parents('.separated_picker').eq(-1)
+        var date_picker_value = parent_div.find('.date_picker>input').val()
+        var time_picker_value = parent_div.find('.time_picker>input').val()
+        if (date_picker_value == '' || time_picker_value == ''){
+          parent_div.children('input[type=hidden]').val('')
+        }
+        else{
+          parent_div.children('input[type=hidden]').val(date_picker_value+' '+time_picker_value)
+        }
+      })
+    }
+    $('.simple-date-picker').find('input[type="text"],select').change(function(){
+      var parent_div = $(this).parents('.simple-date-picker').eq(-1)
+      var year = parent_div.find('.span3').val()
+      var month = parent_div.find('.span2').val()
+      var day = parent_div.find('.span1').val()
+      if (year != '' && month != '' && day != ''){
+        parent_div.find('input[type="hidden"]').eq(-1).val(year+'-'+month+'-'+day)
+      }
+    })
+  })
+</script>
\ No newline at end of file
diff --git a/app/views/admin/calendars/index.html.erb b/app/views/admin/calendars/index.html.erb
index 81a9e88..038a2c5 100644
--- a/app/views/admin/calendars/index.html.erb
+++ b/app/views/admin/calendars/index.html.erb
@@ -1,7 +1,5 @@
-<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 <%= javascript_include_tag 'fullcalendar' %>
 <%= javascript_include_tag 'calendar' %>
-<%= javascript_include_tag 'bootstrap-datetimepicker' %>
 <%= javascript_include_tag 'validator' %>
 
 <%= stylesheet_link_tag "fullcalendar"%>
diff --git a/calendar.gemspec b/calendar.gemspec
index 5bd4048..4926e59 100644
--- a/calendar.gemspec
+++ b/calendar.gemspec
@@ -2,7 +2,20 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "calendar/version"
+dir_pwd = ENV['PWD']
+template_path = dir_pwd + '/app/templates'
+all_template = Dir.glob(template_path+'/*/')
 
+puts 'copying calendar module'
+all_template.each do |folder|
+    if folder.split('/')[-1] != 'mobile'
+        begin 
+            system ('cp -r '+ app_path + '/modules/ ' + folder)
+        rescue 
+            puts 'error copy'
+        end
+    end
+end
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "calendar"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 1b3c11d..7f1eece 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -17,3 +17,17 @@ en:
      weekly: Weekly
      monthly: Monthly
      yearly: Yearly
+     month_name: 
+          '1': 'January'
+          '2': 'February'
+          '3': 'March'
+          '4': 'April'
+          '5': 'May'
+          '6': 'June'
+          '7': 'July'
+          '8': 'August'
+          '9': 'September'
+          '10': 'October'
+          '11': 'November'
+          '12': 'December'
+     calendar_title: "%{month} %{year}"
diff --git a/config/locales/zh_tw.yml b/config/locales/zh_tw.yml
index 01356cb..ccf1b5f 100644
--- a/config/locales/zh_tw.yml
+++ b/config/locales/zh_tw.yml
@@ -14,4 +14,5 @@ zh_tw:
      daily: 每天
      weekly: 每週
      monthly: 每月
-     yearly: 每年
\ No newline at end of file
+     yearly: 每年
+     calendar_title: "%{year}年%{month}月"
\ No newline at end of file
diff --git a/modules/calendar/_calendar_widget1.html.erb b/modules/calendar/_calendar_widget1.html.erb
index bb9e795..51251b7 100644
--- a/modules/calendar/_calendar_widget1.html.erb
+++ b/modules/calendar/_calendar_widget1.html.erb
@@ -28,16 +28,23 @@
             </thead>
             <tbody></tbody>
         </table>
-    </div>  
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="close_box">X</div>
+        <div class="event-header"></div>
+        <div class="event-containers">
+            
+        </div>
+    </div> 
 </div>
-
+<%= stylesheet_link_tag "calendar_widget1" %>
 <script>
     if(document.getElementById("calendar-widget_module") == null){
         var tag = document.createElement('script');
         tag.setAttribute("id", "calendar-widget_module");
         tag.src = "/assets/calendar_widget.js";
         tag.onload = function(){
-            $("div[data-module=calendar]").each(function(index){
+            $("div.widget-calendar-1[data-module=calendar]").each(function(index){
                 var calendar = $(this),
                     cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}");
                 cmi.currentMonth();
diff --git a/modules/calendar/_calendar_widget2.html.erb b/modules/calendar/_calendar_widget2.html.erb
new file mode 100644
index 0000000..3d63517
--- /dev/null
+++ b/modules/calendar/_calendar_widget2.html.erb
@@ -0,0 +1,69 @@
+<div class="w-calendar widget-calendar-2" data-module="calendar">
+    <div class="w-calendar-title">
+        <span>{{widget_title}}</span>
+        <span>{{calendar_title}}</span>
+    </div>
+    <div class='month_template'>
+            <h4 class="widget-title ">
+                <span class="text"></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>
+                <span class="w-calendar-nav-prev-text hide">Prev</span>
+            </a>
+            <a href="#" class="w-calendar-nav-next">
+                <i class="fa fa-chevron-right"></i>
+                <span class="w-calendar-nav-next-text hide">Next</span>
+            </a>
+        </div>
+        <table class="table table-condensed w-calendar-table">
+            <thead>
+                <tr>
+                    <th>Sun</th>
+                    <th>Mon</th>
+                    <th>Tue</th>
+                    <th>Wed</th>
+                    <th>Thu</th>
+                    <th>Fri</th>
+                    <th>Sat</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+    <div class="calendar-events" style="display: none;">
+        <div class="close_box">X</div>
+        <div class="event-header"></div>
+        <div class="event-containers">
+            
+        </div>
+    </div> 
+</div>
+<%= stylesheet_link_tag "calendar_widget2" %>
+<script>
+    if(document.getElementById("calendar-widget_module2") == null){
+        var tag = document.createElement('script');
+        tag.setAttribute("id", "calendar-widget_module2");
+        tag.src = "/assets/calendar_widget2.js";
+        tag.onload = function(){
+            $("div.widget-calendar-2[data-module=calendar]").each(function(index){
+                var calendar = $(this),
+                    cmi = new CalendarModuleMonth(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}");
+                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);
+    }
+</script>
\ No newline at end of file
diff --git a/modules/calendar/info.json b/modules/calendar/info.json
index 02d8167..488ec68 100644
--- a/modules/calendar/info.json
+++ b/modules/calendar/info.json
@@ -17,6 +17,14 @@
                 "en" : "1. Calendar"
             },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "calendar_widget2",
+            "name" : {
+                "zh_tw" : "2. 行事曆加公告",
+                "en" : "2. Calendar with announcement"
+            },
+            "thumbnail" : "thumb2.png"
         }
     ]
 }
\ No newline at end of file
diff --git a/modules/calendar/thumbs/thumb2.png b/modules/calendar/thumbs/thumb2.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/calendar/thumbs/thumb2.png differ