@aleen42/calendar 1.0.0 → 1.1.0-beta.1

package/dist/calendar.css

@@ -446,6 +446,16 @@ input[disabled][role=dropdown] + i {
 .u-menu li {
   position: relative;
 }
+.u-menu li.u-menu-warning,
+.u-menu li.u-menu-warning a,
+.u-menu li.u-menu-warning a:hover {
+  color: #F1BA31;
+}
+.u-menu li.u-menu-error,
+.u-menu li.u-menu-error a,
+.u-menu li.u-menu-error a:hover {
+  color: #E15051;
+}
 .u-menu li a {
   display: block;
   padding: 6px 30px 6px 38px;
@@ -623,6 +633,9 @@ input[disabled][role=dropdown] + i {
   display: inline-block;
   margin: 0 3px;
 }
+.u-page-btns .u-page-btn.visible-input {
+  cursor: default;
+}
 .u-page-btns-center {
   margin-left: 0;
   margin-right: 1px;
@@ -630,6 +643,9 @@ input[disabled][role=dropdown] + i {
 .u-page-btns-center .u-page-btn {
   background-color: #fff;
 }
+.u-page-btns-center .u-page-btn .u-input {
+  margin-top: -1px;
+}
 .u-page-btns-center .u-page-menu {
   top: auto;
   bottom: 100%;
@@ -656,13 +672,21 @@ input[disabled][role=dropdown] + i {
   opacity: 1;
   cursor: pointer;
 }
-.u-page-btn:not(.disabled):hover {
+.u-page-btn:not(.disabled):not(.visible-input):hover {
   background: #ebebeb;
 }
-.u-page-btn:not(.disabled):active,
-.u-page-btn:not(.disabled).active {
+.u-page-btn:not(.disabled):not(.visible-input):active,
+.u-page-btn:not(.disabled):not(.visible-input).active {
   background: #e5e5e5;
 }
+.u-page-btn .u-input {
+  font-size: 13px;
+  padding: 5px 2px;
+  height: 20px;
+  float: left !important;
+  margin-right: 10px;
+  text-align: center;
+}
 .u-page-btnsel.iconfont {
   display: inline-block;
   overflow: hidden;
@@ -1411,10 +1435,9 @@ body p {
 .m-cal-week .content-wrapper .main-content .toolbar,
 .m-cal-month .content-wrapper .main-content .toolbar,
 .m-cal-list .content-wrapper .main-content .toolbar {
-  padding: 12px 0 12px 16px;
+  padding: 12px 16px;
   height: 55px;
   box-sizing: border-box;
-  border-bottom: 1px solid #e8e8e8;
 }
 .m-cal-day .content-wrapper .main-content .toolbar .u-btn[data-btn=today],
 .m-cal-week .content-wrapper .main-content .toolbar .u-btn[data-btn=today],
@@ -1456,8 +1479,24 @@ body p {
 .m-cal-week .content-wrapper .main-content .calendar,
 .m-cal-month .content-wrapper .main-content .calendar,
 .m-cal-list .content-wrapper .main-content .calendar {
+  white-space: nowrap;
   position: absolute;
+  top: 0;
   bottom: 0;
+  left: 0;
+  right: 0;
+}
+.m-cal-day .content-wrapper .main-content .calendar > *,
+.m-cal-week .content-wrapper .main-content .calendar > *,
+.m-cal-month .content-wrapper .main-content .calendar > *,
+.m-cal-list .content-wrapper .main-content .calendar > * {
+  font-size: 0;
+}
+.m-cal-day .content-wrapper .main-content .calendar > * > *,
+.m-cal-week .content-wrapper .main-content .calendar > * > *,
+.m-cal-month .content-wrapper .main-content .calendar > * > *,
+.m-cal-list .content-wrapper .main-content .calendar > * > * {
+  font-size: 14px;
 }
 .m-cal-day .content-wrapper .main-content .calendar table,
 .m-cal-week .content-wrapper .main-content .calendar table,
@@ -1549,13 +1588,13 @@ body p {
   width: 12px;
   height: 12px;
   border-radius: 12px;
-  margin: -6px 0 0 -6px;
+  margin: -6px 0 0 -4px;
 }
 .m-cal-day .content-wrapper .main-content .calendar li.now:after,
 .m-cal-week .content-wrapper .main-content .calendar li.now:after,
 .m-cal-month .content-wrapper .main-content .calendar li.now:after,
 .m-cal-list .content-wrapper .main-content .calendar li.now:after {
-  left: 8px;
+  left: 10px;
   right: 0;
   height: 2px;
   top: -1px;
@@ -1565,10 +1604,10 @@ body p {
 .m-cal-month .content-wrapper .main-content .calendar li.event_selection,
 .m-cal-list .content-wrapper .main-content .calendar li.event_selection {
   font-size: 12px;
-  line-height: 20px;
+  line-height: 24px;
   height: 24px;
   border-radius: 3px;
-  padding: 2px 4px 2px 10px;
+  padding: 0 4px 0 4px;
   box-sizing: border-box;
   z-index: 2;
   position: relative;
@@ -1580,12 +1619,19 @@ body p {
 .m-cal-list .content-wrapper .main-content .calendar li.event_selection.collapsed {
   visibility: hidden;
 }
+.m-cal-day .content-wrapper .main-content .calendar li.event_selection .event_msg,
+.m-cal-week .content-wrapper .main-content .calendar li.event_selection .event_msg,
+.m-cal-month .content-wrapper .main-content .calendar li.event_selection .event_msg,
+.m-cal-list .content-wrapper .main-content .calendar li.event_selection .event_msg {
+  padding-left: 4px;
+}
 .m-cal-day .content-wrapper .main-content .calendar li.event_selection .event_icon,
 .m-cal-week .content-wrapper .main-content .calendar li.event_selection .event_icon,
 .m-cal-month .content-wrapper .main-content .calendar li.event_selection .event_icon,
 .m-cal-list .content-wrapper .main-content .calendar li.event_selection .event_icon {
   font-size: 20px;
   white-space: nowrap;
+  line-height: 24px;
 }
 .m-cal-day .content-wrapper .main-content .calendar li.event_selection:not(.counter):before,
 .m-cal-week .content-wrapper .main-content .calendar li.event_selection:not(.counter):before,
@@ -1607,25 +1653,86 @@ body p {
 .m-cal-list .content-wrapper .main-content .calendar li.event_selection.short-item:before {
   height: 6px;
 }
+.m-cal-day .content-wrapper .main-content .calendar .header,
+.m-cal-week .content-wrapper .main-content .calendar .header,
+.m-cal-month .content-wrapper .main-content .calendar .header,
+.m-cal-list .content-wrapper .main-content .calendar .header {
+  overflow: hidden;
+}
 .m-cal-day .content-wrapper .main-content .calendar .main,
 .m-cal-week .content-wrapper .main-content .calendar .main,
 .m-cal-month .content-wrapper .main-content .calendar .main,
 .m-cal-list .content-wrapper .main-content .calendar .main {
   position: absolute;
-  top: 0;
   bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 .m-cal-week[firstweekday] .content-wrapper .main-content .calendar .main table td:last-child,
 .m-cal-week[firstweekday="0"] .content-wrapper .main-content .calendar .main table td:nth-child(2),
 .m-cal-week[firstweekday="1"] .content-wrapper .main-content .calendar .main table td:nth-child(7) {
   background: #f5f6f8;
 }
+.m-cal-day .content-wrapper .main-content .time-offset,
+.m-cal-week .content-wrapper .main-content .time-offset {
+  width: 60px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.m-cal-day .content-wrapper .main-content .time-offset.scrollable .time-offset-table,
+.m-cal-week .content-wrapper .main-content .time-offset.scrollable .time-offset-table {
+  overflow-x: scroll;
+}
+.m-cal-day .content-wrapper .main-content .time-offset .time-offset-table,
+.m-cal-week .content-wrapper .main-content .time-offset .time-offset-table {
+  overflow: hidden;
+  padding-bottom: 30px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.m-cal-day .content-wrapper .main-content .time-offset .time-offset-table td:first-child,
+.m-cal-week .content-wrapper .main-content .time-offset .time-offset-table td:first-child {
+  border-width: 0 1px 1px 0;
+}
+.m-cal-day .content-wrapper .main-content .time-offset .time-offset-utc,
+.m-cal-week .content-wrapper .main-content .time-offset .time-offset-utc {
+  border: solid #e8e8e8;
+  border-width: 1px 1px 1px 0;
+  box-sizing: border-box;
+  vertical-align: bottom;
+}
+.m-cal-day .content-wrapper .main-content .calendar,
+.m-cal-week .content-wrapper .main-content .calendar {
+  left: 60px;
+}
+.m-cal-day .content-wrapper .main-content .calendar.scrollable .all-days,
+.m-cal-week .content-wrapper .main-content .calendar.scrollable .all-days {
+  overflow-y: scroll;
+}
+.m-cal-day .content-wrapper .main-content .calendar .cal-table,
+.m-cal-week .content-wrapper .main-content .calendar .cal-table {
+  border-bottom-width: 1px;
+}
 .m-cal-day .content-wrapper .main-content .calendar .all-days,
 .m-cal-week .content-wrapper .main-content .calendar .all-days {
+  position: absolute;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
   max-height: 260px;
 }
+.m-cal-day .content-wrapper .main-content .calendar .all-days.empty,
+.m-cal-week .content-wrapper .main-content .calendar .all-days.empty {
+  height: 0;
+}
 .m-cal-day .content-wrapper .main-content .calendar .all-days span.date-next,
 .m-cal-week .content-wrapper .main-content .calendar .all-days span.date-next {
   margin-left: 5px;
@@ -1651,10 +1758,18 @@ body p {
 .m-cal-week .content-wrapper .main-content .calendar .all-days span.date-prev i {
   color: #2e2e2e;
 }
-.m-cal-day .content-wrapper .main-content .calendar .all-days table td,
-.m-cal-week .content-wrapper .main-content .calendar .all-days table td {
+.m-cal-day .content-wrapper .main-content .calendar .all-days .cal-table td,
+.m-cal-week .content-wrapper .main-content .calendar .all-days .cal-table td {
   vertical-align: top;
 }
+.m-cal-day .content-wrapper .main-content .calendar .all-days .cal-table td,
+.m-cal-week .content-wrapper .main-content .calendar .all-days .cal-table td,
+.m-cal-day .content-wrapper .main-content .calendar .all-days .cal-table td:first-child,
+.m-cal-week .content-wrapper .main-content .calendar .all-days .cal-table td:first-child,
+.m-cal-day .content-wrapper .main-content .calendar .all-days .cal-table td:last-child,
+.m-cal-week .content-wrapper .main-content .calendar .all-days .cal-table td:last-child {
+  border-bottom-width: 0;
+}
 .m-cal-day .content-wrapper .main-content .calendar .all-days ul,
 .m-cal-week .content-wrapper .main-content .calendar .all-days ul {
   padding: 0 2px;
@@ -1693,125 +1808,123 @@ body p {
   bottom: 2px;
   right: 4px;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main,
-.m-cal-week .content-wrapper .main-content .calendar div.main {
-  top: 58px;
-  border-top: 1px solid #e8e8e8;
-}
-.m-cal-day .content-wrapper .main-content .calendar div.main table,
-.m-cal-week .content-wrapper .main-content .calendar div.main table {
-  margin-top: -1px;
-}
-.m-cal-day .content-wrapper .main-content .calendar div.main table td,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td {
-  border-style: solid;
-  border-color: #e8e8e8;
-  border-width: 0 1px 1px 1px;
+.m-cal-day .content-wrapper .main-content .calendar .main,
+.m-cal-week .content-wrapper .main-content .calendar .main {
+  overflow-y: auto;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table td:first-child,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td:first-child {
-  width: 60px;
-  padding: 0 8px;
-  border-width: 0 1px 0 0;
-  box-sizing: border-box;
-  text-align: center;
+.m-cal-day .content-wrapper .main-content .calendar table,
+.m-cal-week .content-wrapper .main-content .calendar table,
+.m-cal-day .content-wrapper .main-content .time-offset table,
+.m-cal-week .content-wrapper .main-content .time-offset table {
+  width: 100%;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table td:last-child,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td:last-child {
-  border-width: 0 0 0 1px;
+.m-cal-day .content-wrapper .main-content .calendar table th,
+.m-cal-week .content-wrapper .main-content .calendar table th,
+.m-cal-day .content-wrapper .main-content .time-offset table th,
+.m-cal-week .content-wrapper .main-content .time-offset table th,
+.m-cal-day .content-wrapper .main-content .calendar table td,
+.m-cal-week .content-wrapper .main-content .calendar table td,
+.m-cal-day .content-wrapper .main-content .time-offset table td,
+.m-cal-week .content-wrapper .main-content .time-offset table td {
+  border: 0 solid #e8e8e8;
+}
+.m-cal-day .content-wrapper .main-content .calendar table th:not(:last-child),
+.m-cal-week .content-wrapper .main-content .calendar table th:not(:last-child),
+.m-cal-day .content-wrapper .main-content .time-offset table th:not(:last-child),
+.m-cal-week .content-wrapper .main-content .time-offset table th:not(:last-child),
+.m-cal-day .content-wrapper .main-content .calendar table td:not(:last-child),
+.m-cal-week .content-wrapper .main-content .calendar table td:not(:last-child),
+.m-cal-day .content-wrapper .main-content .time-offset table td:not(:last-child),
+.m-cal-week .content-wrapper .main-content .time-offset table td:not(:last-child) {
+  border-right-width: 1px;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table td:first-child,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td:first-child {
+.m-cal-day .content-wrapper .main-content .calendar table td,
+.m-cal-week .content-wrapper .main-content .calendar table td,
+.m-cal-day .content-wrapper .main-content .time-offset table td,
+.m-cal-week .content-wrapper .main-content .time-offset table td {
   border-width: 0 1px 1px 0;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table td:last-child,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td:last-child {
-  border-width: 1px 0 0 1px;
+.m-cal-day .content-wrapper .main-content .calendar table td:not(:last-child),
+.m-cal-week .content-wrapper .main-content .calendar table td:not(:last-child),
+.m-cal-day .content-wrapper .main-content .time-offset table td:not(:last-child),
+.m-cal-week .content-wrapper .main-content .time-offset table td:not(:last-child) {
+  border-width: 0 0 1px 0;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table td li,
-.m-cal-week .content-wrapper .main-content .calendar div.main table td li {
+.m-cal-day .content-wrapper .main-content .calendar table td li,
+.m-cal-week .content-wrapper .main-content .calendar table td li,
+.m-cal-day .content-wrapper .main-content .time-offset table td li,
+.m-cal-week .content-wrapper .main-content .time-offset table td li {
   position: absolute;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table tr.odd td,
-.m-cal-week .content-wrapper .main-content .calendar div.main table tr.odd td {
+.m-cal-day .content-wrapper .main-content .calendar table tr.odd td,
+.m-cal-week .content-wrapper .main-content .calendar table tr.odd td,
+.m-cal-day .content-wrapper .main-content .time-offset table tr.odd td,
+.m-cal-week .content-wrapper .main-content .time-offset table tr.odd td {
   border-bottom-style: dashed;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table tr:not(.odd) td,
-.m-cal-week .content-wrapper .main-content .calendar div.main table tr:not(.odd) td {
+.m-cal-day .content-wrapper .main-content .calendar table tr:not(.odd) td,
+.m-cal-week .content-wrapper .main-content .calendar table tr:not(.odd) td,
+.m-cal-day .content-wrapper .main-content .time-offset table tr:not(.odd) td,
+.m-cal-week .content-wrapper .main-content .time-offset table tr:not(.odd) td {
   border-top-style: dashed;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table tr td,
-.m-cal-week .content-wrapper .main-content .calendar div.main table tr td {
+.m-cal-day .content-wrapper .main-content .calendar table tr td,
+.m-cal-week .content-wrapper .main-content .calendar table tr td,
+.m-cal-day .content-wrapper .main-content .time-offset table tr td,
+.m-cal-week .content-wrapper .main-content .time-offset table tr td {
   height: 31px;
 }
-.m-cal-day .content-wrapper .main-content .calendar div.main table tr td:not(:first-child),
-.m-cal-week .content-wrapper .main-content .calendar div.main table tr td:not(:first-child) {
+.m-cal-day .content-wrapper .main-content .calendar table tr td:not(:first-child),
+.m-cal-week .content-wrapper .main-content .calendar table tr td:not(:first-child),
+.m-cal-day .content-wrapper .main-content .time-offset table tr td:not(:first-child),
+.m-cal-week .content-wrapper .main-content .time-offset table tr td:not(:first-child) {
   vertical-align: top;
 }
-.m-cal-day .content-wrapper .main-content .calendar table th,
-.m-cal-week .content-wrapper .main-content .calendar table th,
-.m-cal-day .content-wrapper .main-content .calendar table td,
-.m-cal-week .content-wrapper .main-content .calendar table td {
-  border-style: solid;
-  border-color: #e8e8e8;
-}
-.m-cal-day .content-wrapper .main-content .calendar table th:first-child,
-.m-cal-week .content-wrapper .main-content .calendar table th:first-child,
-.m-cal-day .content-wrapper .main-content .calendar table td:first-child,
-.m-cal-week .content-wrapper .main-content .calendar table td:first-child {
-  width: 60px;
-  padding: 0 8px;
-  border-width: 0 1px 0 0;
-  box-sizing: border-box;
-  text-align: center;
-}
-.m-cal-day .content-wrapper .main-content .calendar table th:last-child,
-.m-cal-week .content-wrapper .main-content .calendar table th:last-child,
-.m-cal-day .content-wrapper .main-content .calendar table td:last-child,
-.m-cal-week .content-wrapper .main-content .calendar table td:last-child {
-  border-width: 0 0 0 1px;
-}
-.m-cal-day .content-wrapper .main-content .calendar table th,
-.m-cal-week .content-wrapper .main-content .calendar table th {
-  border-width: 0 0 0 1px;
-}
 .m-cal-day .content-wrapper .main-content .calendar table th.cal-today,
-.m-cal-week .content-wrapper .main-content .calendar table th.cal-today {
+.m-cal-week .content-wrapper .main-content .calendar table th.cal-today,
+.m-cal-day .content-wrapper .main-content .time-offset table th.cal-today,
+.m-cal-week .content-wrapper .main-content .time-offset table th.cal-today {
   border-top-width: 4px;
 }
-.m-cal-day .content-wrapper .main-content .calendar table td,
-.m-cal-week .content-wrapper .main-content .calendar table td {
-  border-width: 0 1px;
-}
 .m-cal-day .content-wrapper .main-content .calendar table th,
-.m-cal-week .content-wrapper .main-content .calendar table th {
+.m-cal-week .content-wrapper .main-content .calendar table th,
+.m-cal-day .content-wrapper .main-content .time-offset table th,
+.m-cal-week .content-wrapper .main-content .time-offset table th {
   height: 60px;
   font-size: 12px;
   padding: 4px 0;
   vertical-align: top;
 }
-.m-cal-day .content-wrapper .main-content .calendar table th:first-child,
-.m-cal-week .content-wrapper .main-content .calendar table th:first-child {
-  vertical-align: bottom;
-}
 .m-cal-day .content-wrapper .main-content .calendar table th > .label,
 .m-cal-week .content-wrapper .main-content .calendar table th > .label,
+.m-cal-day .content-wrapper .main-content .time-offset table th > .label,
+.m-cal-week .content-wrapper .main-content .time-offset table th > .label,
 .m-cal-day .content-wrapper .main-content .calendar table th .date,
-.m-cal-week .content-wrapper .main-content .calendar table th .date {
+.m-cal-week .content-wrapper .main-content .calendar table th .date,
+.m-cal-day .content-wrapper .main-content .time-offset table th .date,
+.m-cal-week .content-wrapper .main-content .time-offset table th .date {
   padding: 0 12px;
+  overflow: hidden;
+  word-wrap: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .m-cal-day .content-wrapper .main-content .calendar table th .date,
-.m-cal-week .content-wrapper .main-content .calendar table th .date {
+.m-cal-week .content-wrapper .main-content .calendar table th .date,
+.m-cal-day .content-wrapper .main-content .time-offset table th .date,
+.m-cal-week .content-wrapper .main-content .time-offset table th .date {
   font-size: 14px;
   line-height: 28px;
   margin-top: 4px;
 }
+.m-cal-day .content-wrapper .main-content .calendar table th:not(:last-child) {
+  border-right-width: 0;
+}
 .m-cal-month .content-wrapper .main-content.aside {
   margin-right: 340px /** gap = */;
 }
-.m-cal-month .content-wrapper .main-content .calendar div.main {
-  top: 49px;
-  overflow: hidden !important;
+.m-cal-month .content-wrapper .main-content .calendar {
+  overflow: hidden;
 }
 .m-cal-month .content-wrapper .main-content .calendar table td,
 .m-cal-month .content-wrapper .main-content .calendar table th {
@@ -1820,6 +1933,10 @@ body p {
 .m-cal-month .content-wrapper .main-content .calendar table th {
   height: 48px;
   padding: 20px 0 8px 14px;
+  overflow: hidden;
+  word-wrap: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .m-cal-month .content-wrapper .main-content .calendar table td {
   cursor: pointer;
@@ -1902,6 +2019,10 @@ body p {
   position: absolute;
   z-index: 1;
 }
+.m-cal-month .content-wrapper .main-content.transition,
+.m-cal-month .content-wrapper .main-content.transition + .aside-content {
+  transition: 0.1s cubic-bezier(0.17, 0.17, 0, 1);
+}
 .m-cal-month .content-wrapper .main-content.transition .calendar table td li {
   transition: width 0.1s cubic-bezier(0.17, 0.17, 0, 1);
 }
@@ -1998,10 +2119,6 @@ body p {
   border-radius: 0 4px 4px 0;
   margin: -1px 0 0 -1px;
 }
-.m-cal-month .content-wrapper .main-content,
-.m-cal-month .content-wrapper .aside-content {
-  transition: 0.1s cubic-bezier(0.17, 0.17, 0, 1);
-}
 .m-cal-list .content-wrapper .main-content [data-dropdown=filter] {
   margin-right: 23px;
 }
@@ -2051,7 +2168,7 @@ body p {
 }
 .m-cal-list .content-wrapper .main-content .calendar td.typeIco,
 .m-cal-list .content-wrapper .main-content .calendar th.typeIco {
-  width: 28px;
+  width: 56px;
 }
 .m-cal-list .content-wrapper .main-content .calendar td.detailIco,
 .m-cal-list .content-wrapper .main-content .calendar th.detailIco {
@@ -2067,11 +2184,18 @@ body p {
 .m-cal-list .content-wrapper .main-content .calendar th.time {
   width: 160px;
 }
+.m-cal-list .content-wrapper .main-content .calendar td.calName,
+.m-cal-list .content-wrapper .main-content .calendar th.calName {
+  width: 150px;
+}
 .m-cal-list .content-wrapper .main-content .calendar td.date {
   width: 192px;
 }
 .m-cal-list .content-wrapper .main-content .calendar th.date {
-  width: 390px;
+  width: 352px;
+}
+.m-cal-list .content-wrapper .main-content .calendar th.calName {
+  width: 150px;
 }
 .m-cal-list .content-wrapper .main-content .calendar .main {
   top: 46px;
@@ -2090,54 +2214,128 @@ body p {
 .m-cal-list .content-wrapper .main-content .pg .u-page {
   margin: 0;
 }
-.m-cal-bubble[color=Indigo] .color,
-[data-view-name="calendar.edit"][color=Indigo] .color {
+.cal-panel {
+  min-width: 650px;
+  box-sizing: border-box;
+  display: inline-block;
+  position: relative;
+}
+.cal-panel .cal-info,
+.cal-panel .cal-table {
+  border: 0 solid #e8e8e8;
+}
+.cal-panel .cal-info {
+  height: 19px;
+  padding: 6px 12px;
+  border-width: 1px 0;
+}
+.cal-panel .cal-info .name {
+  overflow: hidden;
+  word-wrap: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.cal-panel .cal-info .icon-close {
+  font-size: 16px;
+  line-height: 20px;
+  color: #888;
+  cursor: pointer;
+  float: right !important;
+}
+.cal-panel:not(.multiple) .cal-info .icon-close {
+  display: none;
+}
+.cal-panel .cal-table {
+  position: relative;
+}
+.cal-panel.multiple {
+  padding: 0 4px;
+}
+.cal-panel.multiple:first-child {
+  padding-left: 0;
+}
+.cal-panel.multiple:last-child {
+  padding-right: 0;
+}
+.cal-panel.multiple:not(:first-child) .cal-info,
+.cal-panel.multiple:not(:first-child) .cal-table {
+  border-left-width: 1px;
+}
+.cal-panel.multiple:not(:last-child) .cal-info,
+.cal-panel.multiple:not(:last-child) .cal-table {
+  border-right-width: 1px;
+}
+.calendar.scrollable .cal-panel:last-child .cal-info,
+.calendar.scrollable .cal-panel:last-child .cal-table {
+  border-right-width: 1px;
+}
+.cal-spot {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  margin-right: 6px;
+  display: inline-block;
+}
+.cal-spot,
+.cal-spot + * {
+  vertical-align: middle;
+}
+.m-cal-bubble[color="Indigo"] .color,
+[data-view-name="calendar.edit"][color="Indigo"] .color {
   background: #56A2FF;
 }
-.m-cal-bubble[color=Indigo] .time-range,
-[data-view-name="calendar.edit"][color=Indigo] .time-range {
+.m-cal-bubble[color="Indigo"] .time-range,
+[data-view-name="calendar.edit"][color="Indigo"] .time-range {
   background: rgba(86, 162, 255, 0.5);
 }
-.calMain[color=Indigo].calMain_MONTH .sidebar:before,
-.calMain[color=Indigo].calMain_WEEK .sidebar:before,
-.calMain[color=Indigo].calMain_DAY .sidebar:before,
-.calMain[color=Indigo].calMain_MONTH .event_selection,
-.calMain[color=Indigo].calMain_WEEK .event_selection,
-.calMain[color=Indigo].calMain_DAY .event_selection,
-.calMain[color=Indigo].calMain_MONTH .event_selection:hover,
-.calMain[color=Indigo].calMain_WEEK .event_selection:hover,
-.calMain[color=Indigo].calMain_DAY .event_selection:hover {
+.cal-spot[color="Indigo"] {
+  background: #56A2FF;
+}
+.cal-info i[color="Indigo"] {
+  background: #56A2FF;
+}
+.calMain.calMain_MONTH .sidebar[color="Indigo"]:before,
+.calMain.calMain_WEEK .sidebar[color="Indigo"]:before,
+.calMain.calMain_DAY .sidebar[color="Indigo"]:before {
+  background-color: rgba(86, 162, 255, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Indigo"],
+.calMain.calMain_WEEK .event_selection[color="Indigo"],
+.calMain.calMain_DAY .event_selection[color="Indigo"],
+.calMain.calMain_MONTH .event_selection[color="Indigo"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Indigo"]:hover,
+.calMain.calMain_DAY .event_selection[color="Indigo"]:hover {
   background-color: rgba(86, 162, 255, 0.5);
 }
-.calMain[color=Indigo].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Indigo].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Indigo].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Indigo"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Indigo"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Indigo"] .iconfont {
   color: #56A2FF;
 }
-.calMain[color=Indigo].calMain_MONTH .event_selection:before,
-.calMain[color=Indigo].calMain_WEEK .event_selection:before,
-.calMain[color=Indigo].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Indigo"]:before,
+.calMain.calMain_WEEK .event_selection[color="Indigo"]:before,
+.calMain.calMain_DAY .event_selection[color="Indigo"]:before {
   background: #56A2FF;
 }
-.calMain[color=Indigo].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Indigo].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Indigo].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Indigo].calMain_MONTH .new_event_on,
-.calMain[color=Indigo].calMain_WEEK .new_event_on,
-.calMain[color=Indigo].calMain_DAY .new_event_on,
-.calMain[color=Indigo].calMain_MONTH .new_event_on:hover,
-.calMain[color=Indigo].calMain_WEEK .new_event_on:hover,
-.calMain[color=Indigo].calMain_DAY .new_event_on:hover,
-.calMain[color=Indigo].calMain_MONTH .new_event_on div,
-.calMain[color=Indigo].calMain_WEEK .new_event_on div,
-.calMain[color=Indigo].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Indigo"],
+.calMain.calMain_WEEK .new_event_on[color="Indigo"],
+.calMain.calMain_DAY .new_event_on[color="Indigo"],
+.calMain.calMain_MONTH .new_event_on[color="Indigo"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Indigo"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Indigo"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Indigo"] div,
+.calMain.calMain_WEEK .new_event_on[color="Indigo"] div,
+.calMain.calMain_DAY .new_event_on[color="Indigo"] div {
   border-color: #56A2FF;
   background-color: #56A2FF !important;
   box-shadow: none;
 }
-.calMain[color=Indigo].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Indigo"] > i {
   background-color: rgba(86, 162, 255, 0.5);
 }
 .m-cal-bubble[color="Grass Green"] .color,
@@ -2148,146 +2346,170 @@ body p {
 [data-view-name="calendar.edit"][color="Grass Green"] .time-range {
   background: rgba(37, 197, 65, 0.5);
 }
-.calMain[color="Grass Green"].calMain_MONTH .sidebar:before,
-.calMain[color="Grass Green"].calMain_WEEK .sidebar:before,
-.calMain[color="Grass Green"].calMain_DAY .sidebar:before,
-.calMain[color="Grass Green"].calMain_MONTH .event_selection,
-.calMain[color="Grass Green"].calMain_WEEK .event_selection,
-.calMain[color="Grass Green"].calMain_DAY .event_selection,
-.calMain[color="Grass Green"].calMain_MONTH .event_selection:hover,
-.calMain[color="Grass Green"].calMain_WEEK .event_selection:hover,
-.calMain[color="Grass Green"].calMain_DAY .event_selection:hover {
+.cal-spot[color="Grass Green"] {
+  background: #25C541;
+}
+.cal-info i[color="Grass Green"] {
+  background: #25C541;
+}
+.calMain.calMain_MONTH .sidebar[color="Grass Green"]:before,
+.calMain.calMain_WEEK .sidebar[color="Grass Green"]:before,
+.calMain.calMain_DAY .sidebar[color="Grass Green"]:before {
   background-color: rgba(37, 197, 65, 0.5);
 }
-.calMain[color="Grass Green"].calMain_MONTH .event_selection .iconfont,
-.calMain[color="Grass Green"].calMain_WEEK .event_selection .iconfont,
-.calMain[color="Grass Green"].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Grass Green"],
+.calMain.calMain_WEEK .event_selection[color="Grass Green"],
+.calMain.calMain_DAY .event_selection[color="Grass Green"],
+.calMain.calMain_MONTH .event_selection[color="Grass Green"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Grass Green"]:hover,
+.calMain.calMain_DAY .event_selection[color="Grass Green"]:hover {
+  background-color: rgba(37, 197, 65, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Grass Green"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Grass Green"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Grass Green"] .iconfont {
   color: #25C541;
 }
-.calMain[color="Grass Green"].calMain_MONTH .event_selection:before,
-.calMain[color="Grass Green"].calMain_WEEK .event_selection:before,
-.calMain[color="Grass Green"].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Grass Green"]:before,
+.calMain.calMain_WEEK .event_selection[color="Grass Green"]:before,
+.calMain.calMain_DAY .event_selection[color="Grass Green"]:before {
   background: #25C541;
 }
-.calMain[color="Grass Green"].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color="Grass Green"].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color="Grass Green"].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color="Grass Green"].calMain_MONTH .new_event_on,
-.calMain[color="Grass Green"].calMain_WEEK .new_event_on,
-.calMain[color="Grass Green"].calMain_DAY .new_event_on,
-.calMain[color="Grass Green"].calMain_MONTH .new_event_on:hover,
-.calMain[color="Grass Green"].calMain_WEEK .new_event_on:hover,
-.calMain[color="Grass Green"].calMain_DAY .new_event_on:hover,
-.calMain[color="Grass Green"].calMain_MONTH .new_event_on div,
-.calMain[color="Grass Green"].calMain_WEEK .new_event_on div,
-.calMain[color="Grass Green"].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Grass Green"],
+.calMain.calMain_WEEK .new_event_on[color="Grass Green"],
+.calMain.calMain_DAY .new_event_on[color="Grass Green"],
+.calMain.calMain_MONTH .new_event_on[color="Grass Green"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Grass Green"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Grass Green"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Grass Green"] div,
+.calMain.calMain_WEEK .new_event_on[color="Grass Green"] div,
+.calMain.calMain_DAY .new_event_on[color="Grass Green"] div {
   border-color: #25C541;
   background-color: #25C541 !important;
   box-shadow: none;
 }
-.calMain[color="Grass Green"].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Grass Green"] > i {
   background-color: rgba(37, 197, 65, 0.5);
 }
-.m-cal-bubble[color=Orange] .color,
-[data-view-name="calendar.edit"][color=Orange] .color {
+.m-cal-bubble[color="Orange"] .color,
+[data-view-name="calendar.edit"][color="Orange"] .color {
   background: #EEA526;
 }
-.m-cal-bubble[color=Orange] .time-range,
-[data-view-name="calendar.edit"][color=Orange] .time-range {
+.m-cal-bubble[color="Orange"] .time-range,
+[data-view-name="calendar.edit"][color="Orange"] .time-range {
   background: rgba(238, 165, 38, 0.5);
 }
-.calMain[color=Orange].calMain_MONTH .sidebar:before,
-.calMain[color=Orange].calMain_WEEK .sidebar:before,
-.calMain[color=Orange].calMain_DAY .sidebar:before,
-.calMain[color=Orange].calMain_MONTH .event_selection,
-.calMain[color=Orange].calMain_WEEK .event_selection,
-.calMain[color=Orange].calMain_DAY .event_selection,
-.calMain[color=Orange].calMain_MONTH .event_selection:hover,
-.calMain[color=Orange].calMain_WEEK .event_selection:hover,
-.calMain[color=Orange].calMain_DAY .event_selection:hover {
+.cal-spot[color="Orange"] {
+  background: #EEA526;
+}
+.cal-info i[color="Orange"] {
+  background: #EEA526;
+}
+.calMain.calMain_MONTH .sidebar[color="Orange"]:before,
+.calMain.calMain_WEEK .sidebar[color="Orange"]:before,
+.calMain.calMain_DAY .sidebar[color="Orange"]:before {
+  background-color: rgba(238, 165, 38, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Orange"],
+.calMain.calMain_WEEK .event_selection[color="Orange"],
+.calMain.calMain_DAY .event_selection[color="Orange"],
+.calMain.calMain_MONTH .event_selection[color="Orange"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Orange"]:hover,
+.calMain.calMain_DAY .event_selection[color="Orange"]:hover {
   background-color: rgba(238, 165, 38, 0.5);
 }
-.calMain[color=Orange].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Orange].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Orange].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Orange"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Orange"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Orange"] .iconfont {
   color: #EEA526;
 }
-.calMain[color=Orange].calMain_MONTH .event_selection:before,
-.calMain[color=Orange].calMain_WEEK .event_selection:before,
-.calMain[color=Orange].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Orange"]:before,
+.calMain.calMain_WEEK .event_selection[color="Orange"]:before,
+.calMain.calMain_DAY .event_selection[color="Orange"]:before {
   background: #EEA526;
 }
-.calMain[color=Orange].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Orange].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Orange].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Orange].calMain_MONTH .new_event_on,
-.calMain[color=Orange].calMain_WEEK .new_event_on,
-.calMain[color=Orange].calMain_DAY .new_event_on,
-.calMain[color=Orange].calMain_MONTH .new_event_on:hover,
-.calMain[color=Orange].calMain_WEEK .new_event_on:hover,
-.calMain[color=Orange].calMain_DAY .new_event_on:hover,
-.calMain[color=Orange].calMain_MONTH .new_event_on div,
-.calMain[color=Orange].calMain_WEEK .new_event_on div,
-.calMain[color=Orange].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Orange"],
+.calMain.calMain_WEEK .new_event_on[color="Orange"],
+.calMain.calMain_DAY .new_event_on[color="Orange"],
+.calMain.calMain_MONTH .new_event_on[color="Orange"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Orange"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Orange"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Orange"] div,
+.calMain.calMain_WEEK .new_event_on[color="Orange"] div,
+.calMain.calMain_DAY .new_event_on[color="Orange"] div {
   border-color: #EEA526;
   background-color: #EEA526 !important;
   box-shadow: none;
 }
-.calMain[color=Orange].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Orange"] > i {
   background-color: rgba(238, 165, 38, 0.5);
 }
-.m-cal-bubble[color=Grey] .color,
-[data-view-name="calendar.edit"][color=Grey] .color {
+.m-cal-bubble[color="Grey"] .color,
+[data-view-name="calendar.edit"][color="Grey"] .color {
   background: #909090;
 }
-.m-cal-bubble[color=Grey] .time-range,
-[data-view-name="calendar.edit"][color=Grey] .time-range {
+.m-cal-bubble[color="Grey"] .time-range,
+[data-view-name="calendar.edit"][color="Grey"] .time-range {
   background: rgba(144, 144, 144, 0.5);
 }
-.calMain[color=Grey].calMain_MONTH .sidebar:before,
-.calMain[color=Grey].calMain_WEEK .sidebar:before,
-.calMain[color=Grey].calMain_DAY .sidebar:before,
-.calMain[color=Grey].calMain_MONTH .event_selection,
-.calMain[color=Grey].calMain_WEEK .event_selection,
-.calMain[color=Grey].calMain_DAY .event_selection,
-.calMain[color=Grey].calMain_MONTH .event_selection:hover,
-.calMain[color=Grey].calMain_WEEK .event_selection:hover,
-.calMain[color=Grey].calMain_DAY .event_selection:hover {
+.cal-spot[color="Grey"] {
+  background: #909090;
+}
+.cal-info i[color="Grey"] {
+  background: #909090;
+}
+.calMain.calMain_MONTH .sidebar[color="Grey"]:before,
+.calMain.calMain_WEEK .sidebar[color="Grey"]:before,
+.calMain.calMain_DAY .sidebar[color="Grey"]:before {
   background-color: rgba(144, 144, 144, 0.5);
 }
-.calMain[color=Grey].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Grey].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Grey].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Grey"],
+.calMain.calMain_WEEK .event_selection[color="Grey"],
+.calMain.calMain_DAY .event_selection[color="Grey"],
+.calMain.calMain_MONTH .event_selection[color="Grey"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Grey"]:hover,
+.calMain.calMain_DAY .event_selection[color="Grey"]:hover {
+  background-color: rgba(144, 144, 144, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Grey"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Grey"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Grey"] .iconfont {
   color: #909090;
 }
-.calMain[color=Grey].calMain_MONTH .event_selection:before,
-.calMain[color=Grey].calMain_WEEK .event_selection:before,
-.calMain[color=Grey].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Grey"]:before,
+.calMain.calMain_WEEK .event_selection[color="Grey"]:before,
+.calMain.calMain_DAY .event_selection[color="Grey"]:before {
   background: #909090;
 }
-.calMain[color=Grey].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Grey].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Grey].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Grey].calMain_MONTH .new_event_on,
-.calMain[color=Grey].calMain_WEEK .new_event_on,
-.calMain[color=Grey].calMain_DAY .new_event_on,
-.calMain[color=Grey].calMain_MONTH .new_event_on:hover,
-.calMain[color=Grey].calMain_WEEK .new_event_on:hover,
-.calMain[color=Grey].calMain_DAY .new_event_on:hover,
-.calMain[color=Grey].calMain_MONTH .new_event_on div,
-.calMain[color=Grey].calMain_WEEK .new_event_on div,
-.calMain[color=Grey].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Grey"],
+.calMain.calMain_WEEK .new_event_on[color="Grey"],
+.calMain.calMain_DAY .new_event_on[color="Grey"],
+.calMain.calMain_MONTH .new_event_on[color="Grey"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Grey"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Grey"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Grey"] div,
+.calMain.calMain_WEEK .new_event_on[color="Grey"] div,
+.calMain.calMain_DAY .new_event_on[color="Grey"] div {
   border-color: #909090;
   background-color: #909090 !important;
   box-shadow: none;
 }
-.calMain[color=Grey].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Grey"] > i {
   background-color: rgba(144, 144, 144, 0.5);
 }
 .m-cal-bubble[color="Light Yellow"] .color,
@@ -2298,146 +2520,170 @@ body p {
 [data-view-name="calendar.edit"][color="Light Yellow"] .time-range {
   background: rgba(223, 203, 5, 0.5);
 }
-.calMain[color="Light Yellow"].calMain_MONTH .sidebar:before,
-.calMain[color="Light Yellow"].calMain_WEEK .sidebar:before,
-.calMain[color="Light Yellow"].calMain_DAY .sidebar:before,
-.calMain[color="Light Yellow"].calMain_MONTH .event_selection,
-.calMain[color="Light Yellow"].calMain_WEEK .event_selection,
-.calMain[color="Light Yellow"].calMain_DAY .event_selection,
-.calMain[color="Light Yellow"].calMain_MONTH .event_selection:hover,
-.calMain[color="Light Yellow"].calMain_WEEK .event_selection:hover,
-.calMain[color="Light Yellow"].calMain_DAY .event_selection:hover {
+.cal-spot[color="Light Yellow"] {
+  background: #DFCB05;
+}
+.cal-info i[color="Light Yellow"] {
+  background: #DFCB05;
+}
+.calMain.calMain_MONTH .sidebar[color="Light Yellow"]:before,
+.calMain.calMain_WEEK .sidebar[color="Light Yellow"]:before,
+.calMain.calMain_DAY .sidebar[color="Light Yellow"]:before {
   background-color: rgba(223, 203, 5, 0.5);
 }
-.calMain[color="Light Yellow"].calMain_MONTH .event_selection .iconfont,
-.calMain[color="Light Yellow"].calMain_WEEK .event_selection .iconfont,
-.calMain[color="Light Yellow"].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Light Yellow"],
+.calMain.calMain_WEEK .event_selection[color="Light Yellow"],
+.calMain.calMain_DAY .event_selection[color="Light Yellow"],
+.calMain.calMain_MONTH .event_selection[color="Light Yellow"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Light Yellow"]:hover,
+.calMain.calMain_DAY .event_selection[color="Light Yellow"]:hover {
+  background-color: rgba(223, 203, 5, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Light Yellow"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Light Yellow"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Light Yellow"] .iconfont {
   color: #DFCB05;
 }
-.calMain[color="Light Yellow"].calMain_MONTH .event_selection:before,
-.calMain[color="Light Yellow"].calMain_WEEK .event_selection:before,
-.calMain[color="Light Yellow"].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Light Yellow"]:before,
+.calMain.calMain_WEEK .event_selection[color="Light Yellow"]:before,
+.calMain.calMain_DAY .event_selection[color="Light Yellow"]:before {
   background: #DFCB05;
 }
-.calMain[color="Light Yellow"].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color="Light Yellow"].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color="Light Yellow"].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color="Light Yellow"].calMain_MONTH .new_event_on,
-.calMain[color="Light Yellow"].calMain_WEEK .new_event_on,
-.calMain[color="Light Yellow"].calMain_DAY .new_event_on,
-.calMain[color="Light Yellow"].calMain_MONTH .new_event_on:hover,
-.calMain[color="Light Yellow"].calMain_WEEK .new_event_on:hover,
-.calMain[color="Light Yellow"].calMain_DAY .new_event_on:hover,
-.calMain[color="Light Yellow"].calMain_MONTH .new_event_on div,
-.calMain[color="Light Yellow"].calMain_WEEK .new_event_on div,
-.calMain[color="Light Yellow"].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Light Yellow"],
+.calMain.calMain_WEEK .new_event_on[color="Light Yellow"],
+.calMain.calMain_DAY .new_event_on[color="Light Yellow"],
+.calMain.calMain_MONTH .new_event_on[color="Light Yellow"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Light Yellow"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Light Yellow"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Light Yellow"] div,
+.calMain.calMain_WEEK .new_event_on[color="Light Yellow"] div,
+.calMain.calMain_DAY .new_event_on[color="Light Yellow"] div {
   border-color: #DFCB05;
   background-color: #DFCB05 !important;
   box-shadow: none;
 }
-.calMain[color="Light Yellow"].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Light Yellow"] > i {
   background-color: rgba(223, 203, 5, 0.5);
 }
-.m-cal-bubble[color=Cyan] .color,
-[data-view-name="calendar.edit"][color=Cyan] .color {
+.m-cal-bubble[color="Cyan"] .color,
+[data-view-name="calendar.edit"][color="Cyan"] .color {
   background: #04CDB6;
 }
-.m-cal-bubble[color=Cyan] .time-range,
-[data-view-name="calendar.edit"][color=Cyan] .time-range {
+.m-cal-bubble[color="Cyan"] .time-range,
+[data-view-name="calendar.edit"][color="Cyan"] .time-range {
   background: rgba(4, 205, 182, 0.5);
 }
-.calMain[color=Cyan].calMain_MONTH .sidebar:before,
-.calMain[color=Cyan].calMain_WEEK .sidebar:before,
-.calMain[color=Cyan].calMain_DAY .sidebar:before,
-.calMain[color=Cyan].calMain_MONTH .event_selection,
-.calMain[color=Cyan].calMain_WEEK .event_selection,
-.calMain[color=Cyan].calMain_DAY .event_selection,
-.calMain[color=Cyan].calMain_MONTH .event_selection:hover,
-.calMain[color=Cyan].calMain_WEEK .event_selection:hover,
-.calMain[color=Cyan].calMain_DAY .event_selection:hover {
+.cal-spot[color="Cyan"] {
+  background: #04CDB6;
+}
+.cal-info i[color="Cyan"] {
+  background: #04CDB6;
+}
+.calMain.calMain_MONTH .sidebar[color="Cyan"]:before,
+.calMain.calMain_WEEK .sidebar[color="Cyan"]:before,
+.calMain.calMain_DAY .sidebar[color="Cyan"]:before {
+  background-color: rgba(4, 205, 182, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Cyan"],
+.calMain.calMain_WEEK .event_selection[color="Cyan"],
+.calMain.calMain_DAY .event_selection[color="Cyan"],
+.calMain.calMain_MONTH .event_selection[color="Cyan"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Cyan"]:hover,
+.calMain.calMain_DAY .event_selection[color="Cyan"]:hover {
   background-color: rgba(4, 205, 182, 0.5);
 }
-.calMain[color=Cyan].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Cyan].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Cyan].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Cyan"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Cyan"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Cyan"] .iconfont {
   color: #04CDB6;
 }
-.calMain[color=Cyan].calMain_MONTH .event_selection:before,
-.calMain[color=Cyan].calMain_WEEK .event_selection:before,
-.calMain[color=Cyan].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Cyan"]:before,
+.calMain.calMain_WEEK .event_selection[color="Cyan"]:before,
+.calMain.calMain_DAY .event_selection[color="Cyan"]:before {
   background: #04CDB6;
 }
-.calMain[color=Cyan].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Cyan].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Cyan].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Cyan].calMain_MONTH .new_event_on,
-.calMain[color=Cyan].calMain_WEEK .new_event_on,
-.calMain[color=Cyan].calMain_DAY .new_event_on,
-.calMain[color=Cyan].calMain_MONTH .new_event_on:hover,
-.calMain[color=Cyan].calMain_WEEK .new_event_on:hover,
-.calMain[color=Cyan].calMain_DAY .new_event_on:hover,
-.calMain[color=Cyan].calMain_MONTH .new_event_on div,
-.calMain[color=Cyan].calMain_WEEK .new_event_on div,
-.calMain[color=Cyan].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Cyan"],
+.calMain.calMain_WEEK .new_event_on[color="Cyan"],
+.calMain.calMain_DAY .new_event_on[color="Cyan"],
+.calMain.calMain_MONTH .new_event_on[color="Cyan"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Cyan"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Cyan"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Cyan"] div,
+.calMain.calMain_WEEK .new_event_on[color="Cyan"] div,
+.calMain.calMain_DAY .new_event_on[color="Cyan"] div {
   border-color: #04CDB6;
   background-color: #04CDB6 !important;
   box-shadow: none;
 }
-.calMain[color=Cyan].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Cyan"] > i {
   background-color: rgba(4, 205, 182, 0.5);
 }
-.m-cal-bubble[color='Peach'] .color,
-[data-view-name="calendar.edit"][color='Peach'] .color {
+.m-cal-bubble[color="Peach"] .color,
+[data-view-name="calendar.edit"][color="Peach"] .color {
   background: #EF7BAD;
 }
-.m-cal-bubble[color='Peach'] .time-range,
-[data-view-name="calendar.edit"][color='Peach'] .time-range {
+.m-cal-bubble[color="Peach"] .time-range,
+[data-view-name="calendar.edit"][color="Peach"] .time-range {
   background: rgba(239, 123, 173, 0.5);
 }
-.calMain[color='Peach'].calMain_MONTH .sidebar:before,
-.calMain[color='Peach'].calMain_WEEK .sidebar:before,
-.calMain[color='Peach'].calMain_DAY .sidebar:before,
-.calMain[color='Peach'].calMain_MONTH .event_selection,
-.calMain[color='Peach'].calMain_WEEK .event_selection,
-.calMain[color='Peach'].calMain_DAY .event_selection,
-.calMain[color='Peach'].calMain_MONTH .event_selection:hover,
-.calMain[color='Peach'].calMain_WEEK .event_selection:hover,
-.calMain[color='Peach'].calMain_DAY .event_selection:hover {
+.cal-spot[color="Peach"] {
+  background: #EF7BAD;
+}
+.cal-info i[color="Peach"] {
+  background: #EF7BAD;
+}
+.calMain.calMain_MONTH .sidebar[color="Peach"]:before,
+.calMain.calMain_WEEK .sidebar[color="Peach"]:before,
+.calMain.calMain_DAY .sidebar[color="Peach"]:before {
+  background-color: rgba(239, 123, 173, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Peach"],
+.calMain.calMain_WEEK .event_selection[color="Peach"],
+.calMain.calMain_DAY .event_selection[color="Peach"],
+.calMain.calMain_MONTH .event_selection[color="Peach"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Peach"]:hover,
+.calMain.calMain_DAY .event_selection[color="Peach"]:hover {
   background-color: rgba(239, 123, 173, 0.5);
 }
-.calMain[color='Peach'].calMain_MONTH .event_selection .iconfont,
-.calMain[color='Peach'].calMain_WEEK .event_selection .iconfont,
-.calMain[color='Peach'].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Peach"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Peach"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Peach"] .iconfont {
   color: #EF7BAD;
 }
-.calMain[color='Peach'].calMain_MONTH .event_selection:before,
-.calMain[color='Peach'].calMain_WEEK .event_selection:before,
-.calMain[color='Peach'].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Peach"]:before,
+.calMain.calMain_WEEK .event_selection[color="Peach"]:before,
+.calMain.calMain_DAY .event_selection[color="Peach"]:before {
   background: #EF7BAD;
 }
-.calMain[color='Peach'].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color='Peach'].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color='Peach'].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color='Peach'].calMain_MONTH .new_event_on,
-.calMain[color='Peach'].calMain_WEEK .new_event_on,
-.calMain[color='Peach'].calMain_DAY .new_event_on,
-.calMain[color='Peach'].calMain_MONTH .new_event_on:hover,
-.calMain[color='Peach'].calMain_WEEK .new_event_on:hover,
-.calMain[color='Peach'].calMain_DAY .new_event_on:hover,
-.calMain[color='Peach'].calMain_MONTH .new_event_on div,
-.calMain[color='Peach'].calMain_WEEK .new_event_on div,
-.calMain[color='Peach'].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Peach"],
+.calMain.calMain_WEEK .new_event_on[color="Peach"],
+.calMain.calMain_DAY .new_event_on[color="Peach"],
+.calMain.calMain_MONTH .new_event_on[color="Peach"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Peach"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Peach"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Peach"] div,
+.calMain.calMain_WEEK .new_event_on[color="Peach"] div,
+.calMain.calMain_DAY .new_event_on[color="Peach"] div {
   border-color: #EF7BAD;
   background-color: #EF7BAD !important;
   box-shadow: none;
 }
-.calMain[color='Peach'].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Peach"] > i {
   background-color: rgba(239, 123, 173, 0.5);
 }
 .m-cal-bubble[color="Light Brown"] .color,
@@ -2448,198 +2694,233 @@ body p {
 [data-view-name="calendar.edit"][color="Light Brown"] .time-range {
   background: rgba(213, 144, 76, 0.5);
 }
-.calMain[color="Light Brown"].calMain_MONTH .sidebar:before,
-.calMain[color="Light Brown"].calMain_WEEK .sidebar:before,
-.calMain[color="Light Brown"].calMain_DAY .sidebar:before,
-.calMain[color="Light Brown"].calMain_MONTH .event_selection,
-.calMain[color="Light Brown"].calMain_WEEK .event_selection,
-.calMain[color="Light Brown"].calMain_DAY .event_selection,
-.calMain[color="Light Brown"].calMain_MONTH .event_selection:hover,
-.calMain[color="Light Brown"].calMain_WEEK .event_selection:hover,
-.calMain[color="Light Brown"].calMain_DAY .event_selection:hover {
+.cal-spot[color="Light Brown"] {
+  background: #d5904c;
+}
+.cal-info i[color="Light Brown"] {
+  background: #d5904c;
+}
+.calMain.calMain_MONTH .sidebar[color="Light Brown"]:before,
+.calMain.calMain_WEEK .sidebar[color="Light Brown"]:before,
+.calMain.calMain_DAY .sidebar[color="Light Brown"]:before {
   background-color: rgba(213, 144, 76, 0.5);
 }
-.calMain[color="Light Brown"].calMain_MONTH .event_selection .iconfont,
-.calMain[color="Light Brown"].calMain_WEEK .event_selection .iconfont,
-.calMain[color="Light Brown"].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Light Brown"],
+.calMain.calMain_WEEK .event_selection[color="Light Brown"],
+.calMain.calMain_DAY .event_selection[color="Light Brown"],
+.calMain.calMain_MONTH .event_selection[color="Light Brown"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Light Brown"]:hover,
+.calMain.calMain_DAY .event_selection[color="Light Brown"]:hover {
+  background-color: rgba(213, 144, 76, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Light Brown"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Light Brown"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Light Brown"] .iconfont {
   color: #d5904c;
 }
-.calMain[color="Light Brown"].calMain_MONTH .event_selection:before,
-.calMain[color="Light Brown"].calMain_WEEK .event_selection:before,
-.calMain[color="Light Brown"].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Light Brown"]:before,
+.calMain.calMain_WEEK .event_selection[color="Light Brown"]:before,
+.calMain.calMain_DAY .event_selection[color="Light Brown"]:before {
   background: #d5904c;
 }
-.calMain[color="Light Brown"].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color="Light Brown"].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color="Light Brown"].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color="Light Brown"].calMain_MONTH .new_event_on,
-.calMain[color="Light Brown"].calMain_WEEK .new_event_on,
-.calMain[color="Light Brown"].calMain_DAY .new_event_on,
-.calMain[color="Light Brown"].calMain_MONTH .new_event_on:hover,
-.calMain[color="Light Brown"].calMain_WEEK .new_event_on:hover,
-.calMain[color="Light Brown"].calMain_DAY .new_event_on:hover,
-.calMain[color="Light Brown"].calMain_MONTH .new_event_on div,
-.calMain[color="Light Brown"].calMain_WEEK .new_event_on div,
-.calMain[color="Light Brown"].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Light Brown"],
+.calMain.calMain_WEEK .new_event_on[color="Light Brown"],
+.calMain.calMain_DAY .new_event_on[color="Light Brown"],
+.calMain.calMain_MONTH .new_event_on[color="Light Brown"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Light Brown"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Light Brown"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Light Brown"] div,
+.calMain.calMain_WEEK .new_event_on[color="Light Brown"] div,
+.calMain.calMain_DAY .new_event_on[color="Light Brown"] div {
   border-color: #d5904c;
   background-color: #d5904c !important;
   box-shadow: none;
 }
-.calMain[color="Light Brown"].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Light Brown"] > i {
   background-color: rgba(213, 144, 76, 0.5);
 }
-.m-cal-bubble[color=Red] .color,
-[data-view-name="calendar.edit"][color=Red] .color {
+.m-cal-bubble[color="Red"] .color,
+[data-view-name="calendar.edit"][color="Red"] .color {
   background: #F96B6B;
 }
-.m-cal-bubble[color=Red] .time-range,
-[data-view-name="calendar.edit"][color=Red] .time-range {
+.m-cal-bubble[color="Red"] .time-range,
+[data-view-name="calendar.edit"][color="Red"] .time-range {
   background: rgba(249, 107, 107, 0.5);
 }
-.calMain[color=Red].calMain_MONTH .sidebar:before,
-.calMain[color=Red].calMain_WEEK .sidebar:before,
-.calMain[color=Red].calMain_DAY .sidebar:before,
-.calMain[color=Red].calMain_MONTH .event_selection,
-.calMain[color=Red].calMain_WEEK .event_selection,
-.calMain[color=Red].calMain_DAY .event_selection,
-.calMain[color=Red].calMain_MONTH .event_selection:hover,
-.calMain[color=Red].calMain_WEEK .event_selection:hover,
-.calMain[color=Red].calMain_DAY .event_selection:hover {
+.cal-spot[color="Red"] {
+  background: #F96B6B;
+}
+.cal-info i[color="Red"] {
+  background: #F96B6B;
+}
+.calMain.calMain_MONTH .sidebar[color="Red"]:before,
+.calMain.calMain_WEEK .sidebar[color="Red"]:before,
+.calMain.calMain_DAY .sidebar[color="Red"]:before {
+  background-color: rgba(249, 107, 107, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Red"],
+.calMain.calMain_WEEK .event_selection[color="Red"],
+.calMain.calMain_DAY .event_selection[color="Red"],
+.calMain.calMain_MONTH .event_selection[color="Red"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Red"]:hover,
+.calMain.calMain_DAY .event_selection[color="Red"]:hover {
   background-color: rgba(249, 107, 107, 0.5);
 }
-.calMain[color=Red].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Red].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Red].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Red"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Red"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Red"] .iconfont {
   color: #F96B6B;
 }
-.calMain[color=Red].calMain_MONTH .event_selection:before,
-.calMain[color=Red].calMain_WEEK .event_selection:before,
-.calMain[color=Red].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Red"]:before,
+.calMain.calMain_WEEK .event_selection[color="Red"]:before,
+.calMain.calMain_DAY .event_selection[color="Red"]:before {
   background: #F96B6B;
 }
-.calMain[color=Red].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Red].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Red].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Red].calMain_MONTH .new_event_on,
-.calMain[color=Red].calMain_WEEK .new_event_on,
-.calMain[color=Red].calMain_DAY .new_event_on,
-.calMain[color=Red].calMain_MONTH .new_event_on:hover,
-.calMain[color=Red].calMain_WEEK .new_event_on:hover,
-.calMain[color=Red].calMain_DAY .new_event_on:hover,
-.calMain[color=Red].calMain_MONTH .new_event_on div,
-.calMain[color=Red].calMain_WEEK .new_event_on div,
-.calMain[color=Red].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Red"],
+.calMain.calMain_WEEK .new_event_on[color="Red"],
+.calMain.calMain_DAY .new_event_on[color="Red"],
+.calMain.calMain_MONTH .new_event_on[color="Red"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Red"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Red"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Red"] div,
+.calMain.calMain_WEEK .new_event_on[color="Red"] div,
+.calMain.calMain_DAY .new_event_on[color="Red"] div {
   border-color: #F96B6B;
   background-color: #F96B6B !important;
   box-shadow: none;
 }
-.calMain[color=Red].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Red"] > i {
   background-color: rgba(249, 107, 107, 0.5);
 }
-.m-cal-bubble[color=Purple] .color,
-[data-view-name="calendar.edit"][color=Purple] .color {
+.m-cal-bubble[color="Purple"] .color,
+[data-view-name="calendar.edit"][color="Purple"] .color {
   background: #C36FD0;
 }
-.m-cal-bubble[color=Purple] .time-range,
-[data-view-name="calendar.edit"][color=Purple] .time-range {
+.m-cal-bubble[color="Purple"] .time-range,
+[data-view-name="calendar.edit"][color="Purple"] .time-range {
   background: rgba(195, 111, 208, 0.5);
 }
-.calMain[color=Purple].calMain_MONTH .sidebar:before,
-.calMain[color=Purple].calMain_WEEK .sidebar:before,
-.calMain[color=Purple].calMain_DAY .sidebar:before,
-.calMain[color=Purple].calMain_MONTH .event_selection,
-.calMain[color=Purple].calMain_WEEK .event_selection,
-.calMain[color=Purple].calMain_DAY .event_selection,
-.calMain[color=Purple].calMain_MONTH .event_selection:hover,
-.calMain[color=Purple].calMain_WEEK .event_selection:hover,
-.calMain[color=Purple].calMain_DAY .event_selection:hover {
+.cal-spot[color="Purple"] {
+  background: #C36FD0;
+}
+.cal-info i[color="Purple"] {
+  background: #C36FD0;
+}
+.calMain.calMain_MONTH .sidebar[color="Purple"]:before,
+.calMain.calMain_WEEK .sidebar[color="Purple"]:before,
+.calMain.calMain_DAY .sidebar[color="Purple"]:before {
+  background-color: rgba(195, 111, 208, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color="Purple"],
+.calMain.calMain_WEEK .event_selection[color="Purple"],
+.calMain.calMain_DAY .event_selection[color="Purple"],
+.calMain.calMain_MONTH .event_selection[color="Purple"]:hover,
+.calMain.calMain_WEEK .event_selection[color="Purple"]:hover,
+.calMain.calMain_DAY .event_selection[color="Purple"]:hover {
   background-color: rgba(195, 111, 208, 0.5);
 }
-.calMain[color=Purple].calMain_MONTH .event_selection .iconfont,
-.calMain[color=Purple].calMain_WEEK .event_selection .iconfont,
-.calMain[color=Purple].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color="Purple"] .iconfont,
+.calMain.calMain_WEEK .event_selection[color="Purple"] .iconfont,
+.calMain.calMain_DAY .event_selection[color="Purple"] .iconfont {
   color: #C36FD0;
 }
-.calMain[color=Purple].calMain_MONTH .event_selection:before,
-.calMain[color=Purple].calMain_WEEK .event_selection:before,
-.calMain[color=Purple].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color="Purple"]:before,
+.calMain.calMain_WEEK .event_selection[color="Purple"]:before,
+.calMain.calMain_DAY .event_selection[color="Purple"]:before {
   background: #C36FD0;
 }
-.calMain[color=Purple].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=Purple].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=Purple].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=Purple].calMain_MONTH .new_event_on,
-.calMain[color=Purple].calMain_WEEK .new_event_on,
-.calMain[color=Purple].calMain_DAY .new_event_on,
-.calMain[color=Purple].calMain_MONTH .new_event_on:hover,
-.calMain[color=Purple].calMain_WEEK .new_event_on:hover,
-.calMain[color=Purple].calMain_DAY .new_event_on:hover,
-.calMain[color=Purple].calMain_MONTH .new_event_on div,
-.calMain[color=Purple].calMain_WEEK .new_event_on div,
-.calMain[color=Purple].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color="Purple"],
+.calMain.calMain_WEEK .new_event_on[color="Purple"],
+.calMain.calMain_DAY .new_event_on[color="Purple"],
+.calMain.calMain_MONTH .new_event_on[color="Purple"]:hover,
+.calMain.calMain_WEEK .new_event_on[color="Purple"]:hover,
+.calMain.calMain_DAY .new_event_on[color="Purple"]:hover,
+.calMain.calMain_MONTH .new_event_on[color="Purple"] div,
+.calMain.calMain_WEEK .new_event_on[color="Purple"] div,
+.calMain.calMain_DAY .new_event_on[color="Purple"] div {
   border-color: #C36FD0;
   background-color: #C36FD0 !important;
   box-shadow: none;
 }
-.calMain[color=Purple].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color="Purple"] > i {
   background-color: rgba(195, 111, 208, 0.5);
 }
-.m-cal-bubble[color=/* default */ ""] .color,
-[data-view-name="calendar.edit"][color=/* default */ ""] .color {
+.m-cal-bubble[color=""] .color,
+[data-view-name="calendar.edit"][color=""] .color {
   background: #56A2FF;
 }
-.m-cal-bubble[color=/* default */ ""] .time-range,
-[data-view-name="calendar.edit"][color=/* default */ ""] .time-range {
+.m-cal-bubble[color=""] .time-range,
+[data-view-name="calendar.edit"][color=""] .time-range {
   background: rgba(86, 162, 255, 0.5);
 }
-.calMain[color=/* default */ ""].calMain_MONTH .sidebar:before,
-.calMain[color=/* default */ ""].calMain_WEEK .sidebar:before,
-.calMain[color=/* default */ ""].calMain_DAY .sidebar:before,
-.calMain[color=/* default */ ""].calMain_MONTH .event_selection,
-.calMain[color=/* default */ ""].calMain_WEEK .event_selection,
-.calMain[color=/* default */ ""].calMain_DAY .event_selection,
-.calMain[color=/* default */ ""].calMain_MONTH .event_selection:hover,
-.calMain[color=/* default */ ""].calMain_WEEK .event_selection:hover,
-.calMain[color=/* default */ ""].calMain_DAY .event_selection:hover {
+.cal-spot[color=""] {
+  background: #56A2FF;
+}
+.cal-info i[color=""] {
+  background: #56A2FF;
+}
+.calMain.calMain_MONTH .sidebar[color=""]:before,
+.calMain.calMain_WEEK .sidebar[color=""]:before,
+.calMain.calMain_DAY .sidebar[color=""]:before {
   background-color: rgba(86, 162, 255, 0.5);
 }
-.calMain[color=/* default */ ""].calMain_MONTH .event_selection .iconfont,
-.calMain[color=/* default */ ""].calMain_WEEK .event_selection .iconfont,
-.calMain[color=/* default */ ""].calMain_DAY .event_selection .iconfont {
+.calMain.calMain_MONTH .event_selection[color=""],
+.calMain.calMain_WEEK .event_selection[color=""],
+.calMain.calMain_DAY .event_selection[color=""],
+.calMain.calMain_MONTH .event_selection[color=""]:hover,
+.calMain.calMain_WEEK .event_selection[color=""]:hover,
+.calMain.calMain_DAY .event_selection[color=""]:hover {
+  background-color: rgba(86, 162, 255, 0.5);
+}
+.calMain.calMain_MONTH .event_selection[color=""] .iconfont,
+.calMain.calMain_WEEK .event_selection[color=""] .iconfont,
+.calMain.calMain_DAY .event_selection[color=""] .iconfont {
   color: #56A2FF;
 }
-.calMain[color=/* default */ ""].calMain_MONTH .event_selection:before,
-.calMain[color=/* default */ ""].calMain_WEEK .event_selection:before,
-.calMain[color=/* default */ ""].calMain_DAY .event_selection:before {
+.calMain.calMain_MONTH .event_selection[color=""]:before,
+.calMain.calMain_WEEK .event_selection[color=""]:before,
+.calMain.calMain_DAY .event_selection[color=""]:before {
   background: #56A2FF;
 }
-.calMain[color=/* default */ ""].calMain_MONTH .new_event_on:not([data-uid=new]):before,
-.calMain[color=/* default */ ""].calMain_WEEK .new_event_on:not([data-uid=new]):before,
-.calMain[color=/* default */ ""].calMain_DAY .new_event_on:not([data-uid=new]):before {
+.calMain.calMain_MONTH .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_WEEK .new_event_on:not([data-uid=new]):before,
+.calMain.calMain_DAY .new_event_on:not([data-uid=new]):before {
   background: rgba(255, 255, 255, 0.3);
 }
-.calMain[color=/* default */ ""].calMain_MONTH .new_event_on,
-.calMain[color=/* default */ ""].calMain_WEEK .new_event_on,
-.calMain[color=/* default */ ""].calMain_DAY .new_event_on,
-.calMain[color=/* default */ ""].calMain_MONTH .new_event_on:hover,
-.calMain[color=/* default */ ""].calMain_WEEK .new_event_on:hover,
-.calMain[color=/* default */ ""].calMain_DAY .new_event_on:hover,
-.calMain[color=/* default */ ""].calMain_MONTH .new_event_on div,
-.calMain[color=/* default */ ""].calMain_WEEK .new_event_on div,
-.calMain[color=/* default */ ""].calMain_DAY .new_event_on div {
+.calMain.calMain_MONTH .new_event_on[color=""],
+.calMain.calMain_WEEK .new_event_on[color=""],
+.calMain.calMain_DAY .new_event_on[color=""],
+.calMain.calMain_MONTH .new_event_on[color=""]:hover,
+.calMain.calMain_WEEK .new_event_on[color=""]:hover,
+.calMain.calMain_DAY .new_event_on[color=""]:hover,
+.calMain.calMain_MONTH .new_event_on[color=""] div,
+.calMain.calMain_WEEK .new_event_on[color=""] div,
+.calMain.calMain_DAY .new_event_on[color=""] div {
   border-color: #56A2FF;
   background-color: #56A2FF !important;
   box-shadow: none;
 }
-.calMain[color=/* default */ ""].calMain_LIST .colorIco > i {
+.calMain.calMain_LIST .colorIco[color=""] > i {
   background-color: rgba(86, 162, 255, 0.5);
 }
+.calMain.calMain_MONTH .event_icon {
+  max-width: 50%;
+}
 .calMain.calMain_MONTH .out-dated,
 .calMain.calMain_WEEK .out-dated,
 .calMain.calMain_DAY .out-dated {