I found an css styled calendar at jsfiddle and wanted to add some specific

Question

0

Asked: June 17, 20262026-06-17T21:11:48+00:00 2026-06-17T21:11:48+00:00

I found an css styled calendar at jsfiddle and wanted to add some specific

0

I found an css styled calendar at jsfiddle and wanted to add some specific td backgrounds like the diagonal splits here jsfiddle.

But combined it looked very distorted jsfiddle.

HTML:

  <table>
  <thead>
  <tr>
      <th colspan="8">
          Oktober 2011
      </th>
  </tr>
  </thead>
  <tbody>
  <tr>
      <th class="cw">KW</th>
      <th>Mo</th>
      <th>Di</th>
      <th>Mi</th>
      <th>Do</th>
      <th>Fr</th>
      <th>Sa</th>
      <th>So</th>
  </tr>
  <tr>
      <td class="cw">39</td>
      <td class="off">26</td>
      <td class="off">27</td>
      <td class="off">28</td>
      <td class="off">29</td>
      <td class="off">30</td>
      <td class="free">1</td>
      <td class="free">2</td>
  </tr>
  <tr>
      <td class="cw">40</td>
      <td class="free">3</td>
      <td class="free">4</td>
      <td class="free">5</td>
      <td class="free">6</td>
      <td class="free">7</td>
      <td class="booked_pm">8</td>
      <td class="booked">9</td>
  </tr>
  <tr>
      <td class="cw">41</td>
      <td class="booked">10</td>
      <td class="booked">11</td>
      <td class="booked">12</td>
      <td class="booked">13</td>
      <td class="booked">14</td>
      <td class="booked_am">15</td>
      <td class="free">16</td>
  </tr>
  <tr>
      <td class="cw">42</td>
      <td class="free">17</td>
      <td class="free">18</td>
      <td class="free">19</td>
      <td class="free">20</td>
      <td class="free">21</td>
      <td class="free">22</td>
      <td class="free">23</td>
  </tr>
  <tr>
      <td class="cw">43</td>
      <td class="free">24</td>
      <td class="free">25</td>
      <td class="free">26</td>
      <td class="free">27</td>
      <td class="free">28</td>
      <td class="free">29</td>
      <td class="free">30</td>
  </tr>
  <tr>
      <td class="cw">44</td>
      <td class="free">31</td>
      <td class="off">1</td>
      <td class="off">2</td>
      <td class="off">3</td>
      <td class="off">4</td>
      <td class="off">5</td>
      <td class="off">6</td>
  </tr>
  </tbody>

CSS:

body {
background-color: #f4f4f4; }

table {
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-ms-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
-o-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3);
border-spacing: 0;
font-family: 'Helvetica Neue';
width: 239px; }

table thead th {
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: inset 0 1px 0 0 #e88486;
-moz-box-shadow: inset 0 1px 0 0 #e88486;
-ms-box-shadow: inset 0 1px 0 0 #e88486;
-o-box-shadow: inset 0 1px 0 0 #e88486;
box-shadow: inset 0 1px 0 0 #e88486;
background-color: #e56568;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e56568), color-stop(100%, #bd3f41));
background-image: -webkit-linear-gradient(top, #e56568, #bd3f41);
background-image: -moz-linear-gradient(top, #e56568, #bd3f41);
background-image: -ms-linear-gradient(top, #e56568, #bd3f41);
background-image: -o-linear-gradient(top, #e56568, #bd3f41);
background-image: linear-gradient(top, #e56568, #bd3f41);
border: 1px solid #ac2826;
color: white;
font-size: 13pt;
font-weight: 400;
padding: 8px 0;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3); }

table tbody th {
-webkit-box-shadow: inset 0 1px 0 0 white;
-moz-box-shadow: inset 0 1px 0 0 white;
-ms-box-shadow: inset 0 1px 0 0 white;
-o-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
background-color: #f5f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #e8e8e8));
background-image: -webkit-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -moz-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -ms-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: -o-linear-gradient(top, #f5f5f5, #e8e8e8);
background-image: linear-gradient(top, #f5f5f5, #e8e8e8);
border-bottom: 1px solid #d4d4d4;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
padding: 4px 0;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase;
width: 34px; }

table tbody th:first-child {
border-left: 1px solid #abb6bf; }
table tbody th:last-child {
border-right: 1px solid #abb6bf; }
table tbody td {
background-color: #fcfdfd;
border-bottom: 1px solid #e2e2e2;
border-left: 1px solid #e2e2e2;
color: #444444;
font-size: 11pt;
font-weight: bold;
height: 27px;
padding: 0;
text-align: center;
width: 34px; }
table tbody td.off {
color: #9ea2a7; }
table tbody td:last-child {
border-right: 1px solid #abb6bf; }
table tbody td:first-child {
border-left: 1px solid #abb6bf; }
table tbody td:not(:last-child) {
-webkit-box-shadow: inset -1px 0 0 0 #eeefef;
-moz-box-shadow: inset -1px 0 0 0 #eeefef;
-ms-box-shadow: inset -1px 0 0 0 #eeefef;
-o-box-shadow: inset -1px 0 0 0 #eeefef;
box-shadow: inset -1px 0 0 0 #eeefef; }

table tbody th.cw {
border-bottom: none; }

table tbody td.cw {
background-color: #e8e8e8;
border-bottom: none;
color: #666666;
font-size: 7.5pt;
font-weight: normal;
text-align: center;
text-shadow: 0 1px 0 #ffffff;
text-transform: uppercase; }

table tbody td.free {
background-color: #007700;
color: #fff; }

table tbody td.booked {
background-color: #c43c35;
color: #fff; }

table tbody td.booked_am, table tbody td.booked_pm {
height: 27px !important;
display: inline-block;
background: transparent; }

table tbody td.booked_am {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid transparent;
border-right: 32px solid #c43c35;
color: #fff; }

table tbody td.booked_pm {
line-height: 0%;
width: 0px;
background-color:#007700;
border-top: 27px solid #c43c35;
border-right: 32px solid transparent;
color: #fff; }

Maybe someone of you can help.

Thx

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-17T21:11:50+00:00

Since you seem to be using CSS3, I have updated your fiddle using CSS3 gradients : http://jsfiddle.net/9pS3L/1/
It seems to be what you want to achieve.
You should update it with your own colors. Here is a nice gradient tool : http://www.colorzilla.com/gradient-editor/ Should even be IE compatbile, but would make an horiontal gradient (haven’t tried it though…)

You can also use SASS and compass, those are nice tools as well to do CSS3.

Trying to do what you wanted to achieve with borders is tricky since that’s not what borders have been built for in the first place.

Just for the example, the webkit code :

div{
    width:20px;
    height:20px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,red), color-stop(50%,green));
}

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I found an css styled calendar at jsfiddle and wanted to add some specific

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply