home | career | drupal | java | mac | mysql | perl | php | scala | uml | unix

Drupal example source code file (calendar-overlap.css)

This example Drupal source code file (calendar-overlap.css) is included in the DevDaily.com "Drupal Source Code Warehouse" project. The intent of this project is to help you "Learn Drupal by Example".

PHP - Drupal tags/keywords

0px, 1px, calendar, calendar-calendar, day-view, full, height, important, margin-left, multi-day-container, single-day-container, view-item, week-view, width

The calendar-overlap.css Drupal example source code

/** Overlapping week items **/
.calendar-calendar tr.holder {
  height : 0px;
   display: table-row !important;
   display : none;
}

.calendar-calendar .week-view .full div.item-wrapper, 
.calendar-calendar .day-view .full div.item-wrapper {
  background-color: none;
  border:0px;
  float:none;
  margin:0px;
  width : 100%;
  margin-top : -24px;
}

.calendar-calendar td .inner div, 
.calendar-calendar td .inner div a {
   background : none;
}

.calendar-calendar .week-view .full div.single-day div.weekview,
.calendar-calendar .day-view .full div.single-day div.dayview {
  background : #FFD8C0;
  width : auto;
  padding : 0px 3px;
  overflow : hidden;
}

.calendar-calendar .week-view .full div.single-day div.weekview,
.calendar-calendar .day-view .full div.single-day div.dayview {
    border : 1px solid #E39364;
}

.calendar-calendar .week-view .header-body-divider,
.calendar-calendar .week-view .single-day-footer,
.calendar-calendar .day-view .single-day-footer,
.calendar-calendar .day-view .header-body-divider {
  background : #eeeeee;
  border-left : 1px solid #CCCCCC;
  border-right : 1px solid #CCCCCC;
  font-size : 1px;
  height : 4px;
  line-height : 1px;
}

.calendar-calendar .week-view #multi-day-container,
.calendar-calendar .week-view #single-day-container,
.calendar-calendar .day-view #multi-day-container,
.calendar-calendar .day-view #single-day-container {
  position : relative;
  background : #ffffff;
  overflow-y : scroll;
  overflow-x : hidden;
  border-left : 1px solid #CCCCCC;
  border-bottom : 1px solid #CCCCCC;
}

.calendar-calendar .week-view #multi-day-container,
.calendar-calendar .day-view #multi-day-container {
    border-top : 1px solid #CCCCCC;
}

.calendar-calendar .week-view #week-header-container,
.calendar-calendar .day-view #day-header-container {
  width : 100%;
  background : #ffffff;
  border-bottom : 1px solid #CCCCCC;
}

.calendar-calendar .week-view #multi-day-container,
.calendar-calendar .day-view #multi-day-container {
  height : 57px;
}

.calendar-calendar .week-view #multi-day-container .expand {
  height : 100%;
}

.calendar-calendar .week-view #multi-day-container table,
.calendar-calendar .day-view #multi-day-container table {
  height : 100%;
}

.calendar-calendar .week-view #multi-day-container table td,
.calendar-calendar .day-view #multi-day-container table td {
  border-top : 0px;
  border-bottom : 0px;
  vertical-align : top;
  width: 14%;
}

.calendar-calendar .week-view #single-day-container,
.calendar-calendar .day-view #single-day-container {
  border-top : 1px solid #CCCCCC;
  height : 500px;
}

.calendar-calendar .week-view #single-day-container table td,
.calendar-calendar .day-view #single-day-container table td {
  padding : 0px;
  border-top : 0px;
  border-bottom : 0px;
  width: 14%;
}

.calendar-calendar .week-view td.last,
.calendar-calendar .day-view td.last {
   border-right : 0px;
}

.calendar-calendar .week-view #single-day-container div.first,
.calendar-calendar .day-view #single-day-container div.first {
  border-top : 0px;
}

.calendar-calendar .week-view #single-day-container div.last,
.calendar-calendar .day-view #single-day-container div.last {
   border-bottom : 0px;
}

.calendar-calendar .week-view table.full {
  table-layout : fixed;
  width : 100%;
  margin : 0px;
}

.calendar-calendar .day-view table.full {
  table-layout : fixed;
  width : 100%;
  margin : 0px;
}

.calendar-calendar td.calendar-agenda-hour .calendar-hour,
.calendar-calendar td.calendar-agenda-hour .calendar-ampm,
.calendar-calendar .week-view .full div.calendar-agenda-hour span,
.calendar-calendar .day-view .full div.calendar-agenda-hour span {
  font-size : .8em;
  font-weight : normal;
  margin-right: 0px;
}

.calendar-calendar .week-view .full div.calendar-agenda-hour,
.calendar-calendar .day-view .full div.calendar-agenda-hour,
.calendar-calendar .week-view .full div.calendar-agenda-items,
.calendar-calendar .day-view .full div.calendar-agenda-items  {
  width : 100%;
  height : 47px;
  border-top : 1px solid #cccccc;
}

.calendar-calendar .week-view .full .calendar-agenda-hour {
  width : auto;
}

.calendar-calendar .week-view .full .calendar-agenda-hour div,
.calendar-calendar .day-view .full .calendar-agenda-hour div {
  margin-top : 10px;
}

.calendar-calendar .day-view #header-container td.calendar-time-holder,
.calendar-calendar .day-view #multi-day-container td.calendar-time-holder,
.calendar-calendar .day-view #single-day-container td.calendar-time-holder {
  width : 50px;
  padding : 0px;
  border : 0px;
}

.calendar-calendar .day-view #header-container td.calendar-day-holder,
.calendar-calendar .day-view #multi-day-container td.calendar-day-holder,
.calendar-calendar .day-view #single-day-container td.calendar-day-holder {
  width:95%;
}

.calendar-calendar .week-view #header-container td.calendar-time-holder,
.calendar-calendar .week-view #multi-day-container td.calendar-time-holder,
.calendar-calendar .week-view #single-day-container td.calendar-time-holder {
  width : 50px;
  padding : 0px;
  border : 0px;
}

.calendar-calendar .week-view #header-container td.margin-right {
  width : 10px;
}

.calendar-calendar .week-view .full td.calendar-day-holder {
  padding : 0px;
  border : 0px;
  width : 14%;
}

.calendar-calendar .day-view .full td.calendar-day-holder {
  padding : 0px;
  border : 0px;
  width : 95%;
}

.calendar-calendar .week-view .full div.single-day,
.calendar-calendar .day-view .full div.single-day { 
  padding : 0px;
}

.calendar-calendar .week-view .full div.single-day .inner,
.calendar-calendar .day-view .full div.single-day .inner { 
  position : relative;
  z-index : 1;
}

.calendar-calendar .week-view .full td.multi-day {
  padding : 1px 2px 0px 2px;
}

.calendar-calendar .day-view .full td.multi-day div.dayview,
.calendar-calendar .week-view .full td.multi-day div.weekview {
  height : 22px !important;
}

.calendar-calendar .day-view .full td.multi-day .calendar.dayview .contents div,
.calendar-calendar .week-view .full td.multi-day .calendar.weekview .contents div {
  float : left;
}

.calendar-calendar .week-view .full td.multi-day .inner .weekview .continuation {
  height : 22px;
  padding-top: 0px;
  margin-right : 3px;
}

.calendar-calendar .week-view .full td.multi-day .inner .weekview .continues,
.calendar-calendar .week-view .full td.multi-day .inner .weekview .cutoff,
.calendar-calendar .day-view .full td.multi-day .inner .dayview .continues,
.calendar-calendar .day-view .full td.multi-day .inner .dayview .cutoff {
  height : 22px;
  padding-top: 0px;
}

.calendar-calendar .week-view div.single-day .view-item,
.calendar-calendar .day-view div.single-day .view-item {
  position : absolute;
  width : 100%;
  background : none;
  text-align : left;
  z-index : 1;
}

.calendar-calendar .week-view div.single-day .half-hour,
.calendar-calendar .day-view div.single-day .half-hour {
  font-size : 1px;
  height : 23px;
  width : 100%;
  position :relative;
  z-index : 0;
  top : 0px;
  border-bottom : 1px dotted #cccccc;
}

.calendar-calendar .week-view div.single-day .view-item .calendar,
.calendar-calendar .day-view div.single-day .view-item .calendar {
  margin : 0px;
}

.calendar-calendar .week-view div.single-day .view-item .contents,
.calendar-calendar .day-view div.single-day .view-item .contents {
  overflow : hidden;
}

.calendar-calendar div.single-day .o_0 .view-item {
  top : 0px;
}

.calendar-calendar div.single-day .o_1 .view-item {
  top : 12px;
}

.calendar-calendar div.single-day .o_2 .view-item {
  top : 24px;
}

.calendar-calendar div.single-day .o_3 .view-item {
  top : 36px;
}

.calendar-calendar div.single-day .o_4 .view-item {
  top : 40px;
}

.calendar-calendar div.single-day .d_1 .view-item .calendar {
  height : 10px;
}

.calendar-calendar div.single-day .d_2 .view-item .calendar {
  height : 22px;
}

.calendar-calendar div.single-day .d_3 .view-item .calendar {
  height : 34px;
}

.calendar-calendar div.single-day .d_4 .view-item .calendar {
  height : 46px;
}

.calendar-calendar div.single-day .d_5 .view-item .calendar {
  height : 58px;
}

.calendar-calendar div.single-day .d_6 .view-item .calendar {
  height : 70px;
}

.calendar-calendar div.single-day .d_7 .view-item .calendar {
  height : 82px;
}

.calendar-calendar div.single-day .d_8 .view-item .calendar {
  height : 94px;
}

.calendar-calendar div.single-day .d_9 .view-item .calendar {
  height : 106px;
}

.calendar-calendar div.single-day .d_10 .view-item .calendar {
  height : 118px;
}

.calendar-calendar div.single-day .d_11 .view-item .calendar {
  height : 130px;
}

.calendar-calendar div.single-day .d_12 .view-item .calendar {
  height : 142px;
}

.calendar-calendar div.single-day .d_13 .view-item .calendar {
  height : 154px;
}

.calendar-calendar div.single-day .d_14 .view-item .calendar {
  height : 166px;
}

.calendar-calendar div.single-day .d_15 .view-item .calendar {
  height : 178px;
}

.calendar-calendar div.single-day .d_16 .view-item .calendar {
  height : 190px;
}

.calendar-calendar div.single-day .d_17 .view-item .calendar {
  height : 202px;
}

.calendar-calendar div.single-day .d_18 .view-item .calendar {
  height : 214px;
}

.calendar-calendar div.single-day .d_19 .view-item .calendar {
  height : 226px;
}

.calendar-calendar div.single-day .d_20 .view-item .calendar {
  height : 238px;
}

.calendar-calendar div.single-day .d_21 .view-item .calendar {
  height : 250px;
}

.calendar-calendar div.single-day .d_22 .view-item .calendar {
  height : 262px;
}

.calendar-calendar div.single-day .d_23 .view-item .calendar {
  height : 274px;
}

.calendar-calendar div.single-day .d_24 .view-item .calendar {
  height : 286px;
}

.calendar-calendar div.single-day .d_25 .view-item .calendar {
  height : 298px;
}

.calendar-calendar div.single-day .d_26 .view-item .calendar {
  height : 310px;
}

.calendar-calendar div.single-day .d_27 .view-item .calendar {
  height : 322px;
}

.calendar-calendar div.single-day .d_28 .view-item .calendar {
  height : 334px;
}

.calendar-calendar div.single-day .d_29 .view-item .calendar {
  height : 346px;
}

.calendar-calendar div.single-day .d_30 .view-item .calendar {
  height : 358px;
}

.calendar-calendar div.single-day .d_31 .view-item .calendar {
  height : 370px;
}

.calendar-calendar div.single-day .d_32 .view-item .calendar {
  height : 382px;
}

.calendar-calendar div.single-day .d_33 .view-item .calendar {
  height : 394px;
}

.calendar-calendar div.single-day .d_34 .view-item .calendar {
  height : 406px;
}

.calendar-calendar div.single-day .d_35 .view-item .calendar {
  height : 418px;
}

.calendar-calendar div.single-day .d_36 .view-item .calendar {
  height : 430px;
}

.calendar-calendar div.single-day .d_37 .view-item .calendar {
  height : 442px;
}

.calendar-calendar div.single-day .d_38 .view-item .calendar {
  height : 454px;
}

.calendar-calendar div.single-day .d_39 .view-item .calendar {
  height : 466px;
}

.calendar-calendar div.single-day .d_40 .view-item .calendar {
  height : 478px;
}

.calendar-calendar div.single-day .d_41 .view-item .calendar {
  height : 490px;
}

.calendar-calendar div.single-day .d_42 .view-item .calendar {
  height : 502px;
}

.calendar-calendar div.single-day .d_43 .view-item .calendar {
  height : 514px;
}

.calendar-calendar div.single-day .d_44 .view-item .calendar {
  height : 526px;
}

.calendar-calendar div.single-day .d_45 .view-item .calendar {
  height : 538px;
}

.calendar-calendar div.single-day .d_46 .view-item .calendar {
  height : 550px;
}

.calendar-calendar div.single-day .d_47 .view-item .calendar {
  height : 562px;
}

.calendar-calendar div.single-day .d_48 .view-item .calendar {
  height : 574px;
}

.calendar-calendar div.single-day .d_49 .view-item .calendar {
  height : 586px;
}

.calendar-calendar div.single-day .d_50 .view-item .calendar {
  height : 598px;
}

.calendar-calendar div.single-day .d_51 .view-item .calendar {
  height : 610px;
}

.calendar-calendar div.single-day .d_52 .view-item .calendar {
  height : 622px;
}

.calendar-calendar div.single-day .d_53 .view-item .calendar {
  height : 634px;
}

.calendar-calendar div.single-day .d_54 .view-item .calendar {
  height : 646px;
}

.calendar-calendar div.single-day .d_55 .view-item .calendar {
  height : 658px;
}

.calendar-calendar div.single-day .d_56 .view-item .calendar {
  height : 670px;
}

.calendar-calendar div.single-day .d_57 .view-item .calendar {
  height : 682px;
}

.calendar-calendar div.single-day .d_58 .view-item .calendar {
  height : 694px;
}

.calendar-calendar div.single-day .d_59 .view-item .calendar {
  height : 706px;
}

.calendar-calendar div.single-day .d_60 .view-item .calendar {
  height : 718px;
}

.calendar-calendar div.single-day .d_61 .view-item .calendar {
  height : 730px;
}

.calendar-calendar div.single-day .d_62 .view-item .calendar {
  height : 742px;
}

.calendar-calendar div.single-day .d_63 .view-item .calendar {
  height : 754px;
}

.calendar-calendar div.single-day .d_64 .view-item .calendar {
  height : 766px;
}

.calendar-calendar div.single-day .d_65 .view-item .calendar {
  height : 778px;
}

.calendar-calendar div.single-day .d_66 .view-item .calendar {
  height : 790px;
}

.calendar-calendar div.single-day .d_67 .view-item .calendar {
  height : 802px;
}

.calendar-calendar div.single-day .d_68 .view-item .calendar {
  height : 814px;
}

.calendar-calendar div.single-day .d_69 .view-item .calendar {
  height : 826px;
}

.calendar-calendar div.single-day .d_70 .view-item .calendar {
  height : 838px;
}

.calendar-calendar div.single-day .d_71 .view-item .calendar {
  height : 850px;
}

.calendar-calendar div.single-day .d_72 .view-item .calendar {
  height : 862px;
}

.calendar-calendar div.single-day .d_73 .view-item .calendar {
  height : 874px;
}

.calendar-calendar div.single-day .d_74 .view-item .calendar {
  height : 886px;
}

.calendar-calendar div.single-day .d_75 .view-item .calendar {
  height : 898px;
}

.calendar-calendar div.single-day .d_76 .view-item .calendar {
  height : 910px;
}

.calendar-calendar div.single-day .d_77 .view-item .calendar {
  height : 922px;
}

.calendar-calendar div.single-day .d_78 .view-item .calendar {
  height : 934px;
}

.calendar-calendar div.single-day .d_79 .view-item .calendar {
  height : 946px;
}

.calendar-calendar div.single-day .d_80 .view-item .calendar {
  height : 958px;
}

.calendar-calendar div.single-day .d_81 .view-item .calendar {
  height : 970px;
}

.calendar-calendar div.single-day .d_82 .view-item .calendar {
  height : 982px;
}

.calendar-calendar div.single-day .d_83 .view-item .calendar {
  height : 994px;
}

.calendar-calendar div.single-day .d_84 .view-item .calendar {
  height : 1006px;
}

.calendar-calendar div.single-day .d_85 .view-item .calendar {
  height : 1018px;
}

.calendar-calendar div.single-day .d_86 .view-item .calendar {
  height : 1030px;
}

.calendar-calendar div.single-day .d_87 .view-item .calendar {
  height : 1042px;
}

.calendar-calendar div.single-day .d_88 .view-item .calendar {
  height : 1054px;
}

.calendar-calendar div.single-day .d_89 .view-item .calendar {
  height : 1066px;
}

.calendar-calendar div.single-day .d_90 .view-item .calendar {
  height : 1078px;
}

.calendar-calendar div.single-day .d_91 .view-item .calendar {
  height : 1090px;
}

.calendar-calendar div.single-day .d_92 .view-item .calendar {
  height : 1102px;
}

.calendar-calendar div.single-day .d_93 .view-item .calendar {
  height : 1114px;
}

.calendar-calendar div.single-day .d_94 .view-item .calendar {
  height : 1128px;
}

.calendar-calendar div.single-day .d_95 .view-item .calendar {
  height : 1140px;
}

.calendar-calendar div.single-day .d_96 .view-item .calendar {
  height : 1152px;
}

.calendar-calendar .week-view div.single-day .i_0 .view-item .calendar {
  margin-left : 0px;
  width : 50%;
}

.calendar-calendar .week-view div.single-day .i_1 .view-item .calendar {
  margin-left : 10%;
  width : 85%;
}

.calendar-calendar .week-view div.single-day .i_2 .view-item .calendar {
  margin-left : 16%;
  width : 79%;
}

.calendar-calendar .week-view div.single-day .i_3 .view-item .calendar {
  margin-left : 21%;
  width : 74%;
}

.calendar-calendar .week-view div.single-day .i_4 .view-item .calendar {
  margin-left : 30%;
  width : 65%;
}

.calendar-calendar .week-view div.single-day .i_5 .view-item .calendar {
  margin-left : 34%;
  width : 61%;
}

.calendar-calendar .week-view div.single-day .i_6 .view-item .calendar {
  margin-left : 42%;
  width : 53%;
}

.calendar-calendar .week-view div.single-day .i_7 .view-item .calendar {
  margin-left : 49%;
  width : 46%;
}

.calendar-calendar .week-view div.single-day .i_8 .view-item .calendar {
  margin-left : 55%;
  width : 40%;
}

.calendar-calendar .week-view div.single-day .i_9 .view-item .calendar {
  margin-left : 65%;
  width : 30%;
}

.calendar-calendar .week-view div.single-day .i_0.md_0 .view-item .calendar {
    width : 95% !important;
    width : auto;
}

.calendar-calendar .week-view div.single-day .i_0.md_1 .view-item .calendar {
    width : 60% !important;
    width : auto;
}

.calendar-calendar .day-view div.single-day .i_0 .view-item .calendar {
  margin-left : 2px;
  width : 25% !important;
  width : 97%;
}

.calendar-calendar .day-view div.single-day .i_1 .view-item .calendar {
  margin-left : 10%;
  width : 89%;
}

.calendar-calendar .day-view div.single-day .i_2 .view-item .calendar {
  margin-left : 20%;
  width : 79%;
}

.calendar-calendar .day-view div.single-day .i_3 .view-item .calendar {
  margin-left : 30%;
  width : 69%;
}

.calendar-calendar .day-view div.single-day .i_4 .view-item .calendar {
  margin-left : 40%;
  width : 59%;
}

.calendar-calendar .day-view div.single-day .i_5 .view-item .calendar {
  margin-left : 50%;
  width : 49%;
}

.calendar-calendar .day-view div.single-day .i_6 .view-item .calendar {
  margin-left : 60%;
  width : 39%;
}

.calendar-calendar .day-view div.single-day .i_7 .view-item .calendar {
  margin-left : 70%;
  width : 29%;
}

.calendar-calendar .day-view div.single-day .i_8 .view-item .calendar {
  margin-left : 75%;
  width : 24%;
}

.calendar-calendar .day-view div.single-day .i_9 .view-item .calendar {
  margin-left : 80%;
  width : 19%;
}

.calendar-calendar .day-view div.single-day .i_0.md_0 .view-item .calendar {
    width : 98% !important;
    width : auto;
}

.calendar-calendar .day-view div.single-day .i_0.md_1 .view-item .calendar {
    width : 60% !important;
    width : auto;
}

.calendar-calendar .day-view div.single-day .i_0.md_2 .view-item .calendar {
    width : 40% !important;
    width : auto;
}

.calendar-calendar .day-view div.single-day .i_0.md_3 .view-item .calendar {
    width : 30% !important;
    width : auto;
}

.single-day-footer .grippie,
.header-body-divider .grippie {
  overflow: hidden;
  background: #eee url(/misc/grippie.png) no-repeat center 2px;
  cursor: s-resize;
  height : 3px;
}

Other Drupal examples (source code examples)

Here is a short list of links related to this Drupal calendar-overlap.css source code file:

new blog posts

"Drupal" is a registered trademark of Dries Buytaert.

my drupal tutorials and examples  

Copyright 1998-2016 Alvin Alexander, alvinalexander.com
All Rights Reserved.

Beginning in 2016, a portion of the proceeds from pages under the '/drupal-code-examples/' URI will be donated to charity.