frontend widget plus show page fix

app/assets/javascripts/calendar_frontend.js

@@ -232,7 +232,7 @@ var AgendaView = function(calendar){
 													'</div>' +
 												'</div>';
 
-	var event_list_template = '<div class="col-md-8">' +
+	var event_list_template = '<div class="col-md-8 agenda-event">' +
 																'<table class="table table-condensed table-bordered event_list">' +
 																	'<thead>' +
 																		'<tr>' +
@@ -256,7 +256,7 @@ var AgendaView = function(calendar){
 												'<label>To</label>' +
 												'<select name="end_month" class="form-control input-sm" />' +
 												'<select name="end_year" class="form-control input-sm" />' +
-												'<button id="show_events" class="btn btn-sm bt-filter">Show Events</button>' +
+												'<button id="show_events" class="btn btn-sm bt-filter btn-primary">Show Events</button>' +
 											'</div>';
 
 	var event_template =  '<tr>' +
@@ -407,6 +407,8 @@ var AgendaView = function(calendar){
 					if($(this).find("tr").length > 1)
 						$(this).find("td.no_events").parent().remove();
 				})
+				// nano scroller here
+				
 			}
 		})
 		var eventDom = function(event){

app/assets/javascripts/calendar_widget.js

@@ -1,9 +1,10 @@
- var CalendarModuleMonth = function(date,dom,subpart){
+ var CalendarModuleMonth = function(date,dom,subpart,url){
     _this = this;
     var template = dom.find(".month_template"),
         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(),
@@ -127,6 +128,11 @@
               var dt = inserting_date + "-" + month + "-" + year,
                   td = dom.find("td[data-date-node=" + dt + "]");
               td.addClass("w-calendar-event");
+              if(index_url != ""){
+                td.on("click",function(){
+                  window.location.href = "http://" + window.location.host + index_url;
+                })
+              }
               inserting_date++;
               if(inserting_date > lastDay.getDate() || (ed.getMonth() == month && inserting_date > ed.getDate())){
                 break;

app/assets/stylesheets/calendar.scss

@@ -3,96 +3,121 @@
     transition: all 0.3s ease;
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
+
     .cal-fn {
         position: relative;
     }
+
     #sec1 {
         margin-top: 10px;
         margin-bottom: 10px;
+
         .internal-page & {
             float: left;
+
             @media screen and (max-width: 767px) {
                 float: none;
             }
+
             .btn-toolbar {
                 margin-left: 0;
+                margin-right: 15px;
             }
+
             .form-inline {
                 margin-top: 0;
                 margin-bottom: 0;
             }
         }
+
         @media screen and (max-width: 767px) {
             float: none;
         }
-
     }
+
     #sec2 {
         width: 100%;
         margin-top: 10px;
         margin-bottom: 10px;
         text-align: center;
+
         .current_day_title {
             width: 100%;
             line-height: 28px;
         }
+
         @media screen and (max-width: 767px) {
             position: absolute;
             top: 0;
+
             .current_day_title {
                 margin: 0;
                 text-align: right;
             }
         }
+
         @media screen and (max-width: 479px) {
             position: static;
+
             .current_day_title {
                 text-align: center;
             }
         }
     }
+
     #sec3 {
         margin-top: 10px;
         margin-bottom: 10px;
+        float: left;
+
         .internal-page & {
             .calendar_mode {
                 float: none;
             }
+
             @media screen and (max-width: 767px) {
                 float: none;
                 width: 100%;
                 text-align: left;
             }
         }
+
         @media screen and (max-width: 767px) {
             float: none;
         }
     }
+
     #range_selection {
         margin-top: 10px;
         margin-right: 5px;
         margin-bottom: 10px;
         font-size: 12px;
+
         & > * {
             margin: 0 5px;
         }
+
         @media screen and (max-width: 479px) {
             margin-right: 0;
+
             & > * {
                 margin: 0;
             }
+
             & > label,
             #show_events {
                 display: block;
                 margin-top: 10px;
                 margin-bottom: 10px;
             }
+
             & > select {
                 display: block;
                 width: 100%;
                 margin-bottom: 5px;
             }
         }
+
         @media screen and (max-width: 767px) {
             & > select {
                 .internal-page & {
@@ -101,14 +126,17 @@
             }
         }
     }
+
     .fc-view {
         font-size: 1em;
         background-color: #fff;
     }
 }
+
 #view_holder {
     clear: both;
 }
+
 .calendar_color_tag {
     display: inline-block;
     width: 18px;
@@ -116,15 +144,19 @@
     margin-right: 4px;
     vertical-align: bottom;
 }
+
 .calendar_mode {
     z-index: 2;
 }
+
 .mode_switch {
     text-transform: capitalize;
 }
+
 .today {
     background-color: #D9EDF7;
 }
+
 .event {
     font-size: 12px;
     border-radius: 3px;
@@ -135,9 +167,11 @@
     -webkit-box-shadow: inset 0 0 1px black;
     -moz-box-shadow: inset 0 0 1px black;
 }
+
 .modal-body {
     max-height: 400px;
 }
+
 .event_list_wrapper {
     position: relative;
 }
@@ -148,11 +182,13 @@
         border: solid 1px #ddd;
         border-top: 0;
     }
+
     .divide {
         height: 19px;
         margin-bottom: 18px;
         border-bottom: solid 1px #eee;
     }
+
     .day_time {
         height: 31px;
         border-bottom: solid 1px #ddd;
@@ -167,9 +203,11 @@
         margin: 0;
         padding: 0;
     }
+
     dl {
         padding: 3px;
     }
+
     dt {
         font-size: 11px;
         font-weight: normal;
@@ -186,25 +224,32 @@
         top: 0;
         z-index: 1;
     }
+
     .header {
         margin-bottom: 10px;
     }
+
     .header th {
         text-align: center;
     }
+
     td {
         border: 0;
     }
+
     .event {
         margin-bottom: 2px;
     }
+
     .all_day_event {
         background: #eee;
         border: solid 1px #ddd;
     }
+
     .event_list .table {
         border-top: solid 1px #ddd;
     }
+
     .event_list td {
         padding: 0;
     }
@@ -215,14 +260,14 @@
         position: relative;
         margin: 0 16px 0 2px;
     }
+
     .event {
         padding: 0px;
         position: absolute;
         width: 100%;
     }
-	.event.half {
+    .event.half {}
 
-	}
     .event.over {
         border: solid 1px #fff;
     }
@@ -231,67 +276,82 @@
 /* month view */
 #calendar_month {
     border-bottom: solid 1px #ddd;
+
     .month_row {
         position: relative;
         border: solid 1px #ddd;
         border-bottom: 0;
         height: 60px;
         overflow: hidden;
+
         &.header {
             height: 28px;
             border: 0;
+
             th {
                 font-size: 12px;
                 padding: 4px;
                 border: 0;
             }
         }
+
         .table {
             table-layout: fixed;
             margin-bottom: 0;
             width: 100%;
             position: absolute;
+
             td {
                 border: 0;
                 border-left: solid 1px #ddd;
                 padding: 2px 4px 0 4px;
+
                 &.today {
                     border-bottom: solid 1px #fff;
                     border-top: solid 1px #fff;
                 }
+
                 &.disable {
                     background-color: #f6f6f6;
                     color: #ccc;
                     border-left: solid 1px #ddd;
                 }
+
                 &:first-child {
                     border-left: 0;
                 }
             }
         }
+
         .month_table {
             height: 100%;
         }
+
         .month_date {
             color: #666;
             font-size: 11px;
             cursor: pointer;
+
             td {
-				border-left: 0
+                border-left: 0;
             }
+
             .day_title:hover {
                 text-decoration: underline;
             }
+
             .event:hover {
                 text-decoration: none !important;
             }
         }
+
         .event {
             margin: 0 -2px;
             position: relative;
             color: #000;
         }
     }
+
     .event.single {
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
@@ -303,43 +363,53 @@
 #calendar_agenda {
     margin-top: 20px;
     font-size: 12px;
+
+	> .row {
+	    margin-bottom: 30px;
+	}
+
     .table {
         margin-bottom: 0;
         background-color: #fff;
     }
+
     .tiny_calendar {
         .table {
             th {
                 text-align: center;
                 border-top: 0;
             }
+
             td {
                 text-align: center;
             }
         }
     }
+
     .event {
         -webkit-box-shadow: none;
         -moz-box-shadow: none;
         box-shadow: none;
     }
+
     .row-fluid {
         margin-top: 20px;
         padding-top: 20px;
         border-top: dashed 1px #ddd;
+
         &:first-child {
             border-top: 0;
             padding-top: 0;
             margin-top: 0;
         }
     }
-	.table.event_list {
+
-		margin-top: 40px;
-	}
 }
+
 .event_time {
     font-family: Tahoma, sans-serif;
 }
+
 .has_event {
     background-color: #08c;
     color: #fff;
@@ -351,68 +421,81 @@
         position: absolute;
         width: 100%;
     }
+
     td {
         padding: 0;
     }
+
     .table {
         margin-bottom: 0;
     }
+
     .header {
         margin-bottom: 12px;
         border-top: 0;
         table-layout: fixed;
     }
+
     .header {
         th {
             text-align: center;
             font-size: 12px;
         }
+
         td {
             border: solid 1px #ddd;
             /*background-color: #eee;*/
         }
     }
+
     .week_day {
         padding: 0 2px;
         border: solid 1px #ddd;
     }
+
     .header .week_day {
         padding: 2px 4px 0px 2px;
     }
+
     .event_list .event {
         position: absolute;
         width: 100%;
         margin-bottom: 2px;
     }
+
     .cell_map {
         margin-bottom: 18px;
+
         td {
             border-top: 0;
             border-bottom: 0;
         }
+
         tr:first-child td {
             border-top: solid 1px #ddd;
         }
     }
+
     .event_holder .inner {
         margin: 0 8px 0 0;
     }
+
     .all_day_event_holder {
         position: relative;
         width: 100%;
         table-layout: fixed;
     }
+
     .all_day_event_holder td {
         border: 0;
         background-color: transparent;
     }
+
     .all_day_event {
         background: #eee;
     }
 }
 
-
-
 /* calendars(category) */
 .calendars_color_tag {
     width: 20px;
@@ -426,11 +509,14 @@
 .event_controller {
     .form-horizontal {
         margin-bottom: 0;
+
         .control-label {
             width: 60px;
         }
+
         .controls {
             margin-left: 80px;
+
             input[type="text"],
             select,
             textarea,
@@ -442,9 +528,11 @@
                 -moz-box-sizing: border-box;
                 box-sizing: border-box;
             }
+
             input[type="checkbox"] {
                 margin-top: 0;
             }
+
             textarea {
                 height: auto;
                 line-height: 1em;
@@ -452,11 +540,14 @@
             }
         }
     }
+
     .last {
         margin-bottom: 0;
     }
+
     .row-fluid {
         margin-bottom: 6px;
+
         .control-label {
             line-height: 30px;
         }
@@ -476,6 +567,7 @@
     margin-left: 10px;
     border-color: #f1f1f1;
 }
+
 .miniColors-selector {
     float: none;
     margin: 4px 0 0 0;
@@ -485,6 +577,7 @@
 .edit_cal {
     margin: -8px;
     background-color: whitesmoke;
+
     .table,
     .table td {
         border: 0 !important;
@@ -492,6 +585,7 @@
         margin: 0 !important;
     }
 }
+
 .main-list td {
     border-top: solid 1px #ddd;
 }
@@ -506,9 +600,11 @@
     overflow: hidden;
     position: absolute;
     clear: none;
+
     .viewport {
         height: 170px;
     }
+
     .scrollbar {
         top: 8px;
     }
@@ -517,12 +613,15 @@
 #tags_list {
     padding: 8px;
 }
+
 .bootstrap-datetimepicker-widget.dropdown-menu {
     z-index: 1051;
 }
+
 #main-wrap {
     padding-bottom: 0;
 }
+
 .fc-other-month {
     background-color: #F6F6F6;
 }
@@ -535,12 +634,14 @@
     height: 120px;
     padding: 5px;
     border-radius: 4px;
-	background-color: rgba(255,255,255,.95);
+    border: 1px solid #dbdbdb;
-	background-image: url('/assets/loading1.gif');
+    background-color: rgba(255, 255, 255, 0.95);
+    background-image: url("/assets/loading1.gif");
     background-repeat: no-repeat;
     background-position: center 20px;
     background-size: 50%;
-	box-shadow: 0 0 30px -10px #000;
+    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.2);
+
     &:after {
         content: "Loading...";
         position: absolute;
@@ -551,6 +652,7 @@
         text-align: center;
     }
 }
+
 #event_create_space {
     display: none;
     position: fixed;
@@ -568,24 +670,38 @@
     -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
     background-clip: padding-box;
+
     .alert {
         margin-bottom: 0;
     }
+
     .new_event {
         margin-bottom: 0;
     }
+    .modal-body {
+    	overflow-x: hidden;
+    	padding: 25px 25px 15px 15px;
     }
+    .datetimepick {
+    	> input {
+			width: 90%;
+    	}
+    }
+}
+
 .calendar-modal {
     position: fixed;
     z-index: 1050;
     width: 300px;
     margin: 0;
     font-size: 12px;
+
     & > .modal-content {
         h3 {
             margin: 0;
         }
     }
+
     .event_summary {
         margin-right: -15px;
         margin-bottom: 15px;
@@ -594,14 +710,17 @@
         padding-bottom: 15px;
         padding-left: 15px;
         border-bottom: 1px solid #eee;
+
         > p {
             margin-bottom: 0;
         }
+
         i {
             color: #989898;
         }
     }
 }
+
 .calendar-form-actions {
     margin-top: 0;
     margin-bottom: 0;
@@ -609,5 +728,14 @@
     padding-right: 0;
     padding-bottom: 0;
     padding-left: 0;
-
+}
+
+.agenda-event {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: 200px;
+	margin-top: 40px;
+    @media screen and (max-width: 767px) {
+		height: auto;
+	}
 }

app/controllers/calendars_controller.rb

@@ -13,8 +13,12 @@ class CalendarsController < ApplicationController
 
   def widget
     part = OrbitHelper.get_current_widget
+
     {
-      "extras" => {"subpart-id"=>part.id.to_s}
+      "extras" => {
+        "subpart-id" => part.id.to_s,
+        "more_url" => OrbitHelper.widget_more_url
+      }
     }
   end
 

app/views/admin/calendars/index.html.erb

@@ -6,7 +6,6 @@
 
 <%= stylesheet_link_tag "fullcalendar"%>
 <%= stylesheet_link_tag "calendar"%>
-
 <div id="orbit_calendar" class="month_view">
 	<div class="clearfix cal-fn">
 		<div id='sec2'>