クリッカブルカレンダー

• • after,

  • {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;
box-sizing: border-box;

} body {

color: #333;
background: #EFECE5;
font-size: 14px;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

}

• 1. wrap {

padding: 0 5%; }

@media screen and (max-width: 600px) {

#wrap {
padding: 0 5px;
}

}

/* ========================================

* #mini-calendar
* ========================================*/

• 1. mini-calendar .calendar-year-month {

text-align: center;

font-size: 32px;
margin-bottom: 20px;
font-weight: bold;

}

• 1. mini-calendar table {

width: 100%;

border-spacing: 0;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-bottom: 0;
line-height: 1.5;
border-collapse: separate;

}

• 1. mini-calendar th,
  2. mini-calendar td {

background: #fff;

padding: 7px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;

}

• 1. mini-calendar th {

color: #fff;

background: #4F616B;
vertical-align: top;
padding-top: 7px;
padding-bottom: 7px;

}

/*

• 1. mini-calendar th.calendar-sun {

color: #DF0D2D;

background: #F8E4E4;

}

• 1. mini-calendar th.calendar-sat {

color: #2574D3;

background: #E2F3FC;

}

• • /
  1. mini-calendar td {

width: 14.3%;

height: 100px;
vertical-align: top;

}

• 1. mini-calendar td.calendar-day-off {

background: #F4F3F2;

color: #555;

}

• 1. mini-calendar td.calendar-holiday,
  2. mini-calendar td.calendar-sun {

color: #CE2727;

background: #FCF3F3;

}

• 1. mini-calendar td.calendar-sat {

color: #54AFC8;

background: #F5FBFE;

}

• 1. mini-calendar .calendar-day-number {

font-style: normal;

font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
font-size: 16px;
display: block;
padding: 0 3px;
line-height: 1.2;

}

• 1. mini-calendar td.calendar-holiday .day,
  2. mini-calendar td.calendar-sun .day {

color: #DF0D2D; }

• 1. mini-calendar td.calendar-sat .day {

color: #2574D3; }

• 1. mini-calendar td span {

font-size: 11px;

line-height: 1.3;
display: block;

}

• 1. mini-calendar [class*=calender-label] {

font-size: 11px;

line-height: 1.3;
color: #000;
background: #FCEBCF;
border: solid 1px #D2AC8E;
display: block;
padding: 3px;
margin-top: 3px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;

}

• 1. mini-calendar td span.calender-label-red {

background-color: #FCCFD1;

border-color: #D28EA6;

}

• 1. mini-calendar td span.calender-label-blue {

background-color: #CFE4FC;

border-color: #8E9BD2;

}

• 1. mini-calendar td span.calender-label-green {

background-color: #E5FCCF;

border-color: #99C170;

} /* 何もない日 */

• 1. mini-calendar td.calendar-none {

background: #FBFAF7; }

• 1. mini-calendar td.calendar-today {

background: #FEFBDA; }

@media screen and (max-width: 600px) {

#mini-calendar thead {
display: none;
}
#mini-calendar th,
#mini-calendar td {
display: block;
width: 100%;
padding: 0;
}
#mini-calendar td {
height: auto;
display: -webkit-flex;
display: flex;
}
#mini-calendar .calendar-none {
display: none
}

1. mini-calendar .calendar-labels {

padding: 5px;
}
#mini-calendar [class*=calender-label] {
display: inline-block;
padding: 5px;
margin-top: 0;
margin-right: 5px;
font-size: 12px;
}

/* 日付 */

#mini-calendar td .calendar-day-number {
font-weight: normal;
padding: 7px;
font-size: 18px;
display: block;
background: #f2e6cd;
margin-bottom: 0;
width: 75px;
height: auto;
}
#mini-calendar td.calendar-holiday .calendar-day-number,
#mini-calendar td.calendar-sun .calendar-day-number {
background: #f8c7c7;
}

1. mini-calendar td.calendar-sat .calendar-day-number {

background: #c8ebfe;
}

/* モバイル用曜日を追加 */

#mini-calendar td i:after {
font-size: 12px;
position: relative;
left: -5px;
}
#mini-calendar td:nth-child(1) i:after {
content: "（日）";
}
#mini-calendar td:nth-child(2) i:after {
content: "（月）";
}
#mini-calendar td:nth-child(3) i:after {
content: "（火）";
}
#mini-calendar td:nth-child(4) i:after {
content: "（水）";
}
#mini-calendar td:nth-child(5) i:after {
content: "（木）";
}
#mini-calendar td:nth-child(6) i:after {
content: "（金）";
}
#mini-calendar td:nth-child(7) i:after {
content: "（土）";
}

}

---

{

"year": 2017,
"month": 5,
"event": [
{ "day": "1", "title": "イベント1", "type": "blue" },
{ "day": "2", "title": "イベント2", "type": "red" },
{ "day": "3", "title": "イベント3", "type": "green" },
{ "day": "3", "title": "イベント4" },
{ "day": "5", "title": "イベント5", "type": "blue" },
{ "day": "5", "title": "イベント6", "type": "red" },
{ "day": "7", "title": "イベント7" },
{ "day": "8", "title": "イベント8", "type": "blue" },
{ "day": "8", "title": "イベント9" },
{ "day": "10", "title": "イベント10" },
{ "day": "10", "title": "イベント11" },
{ "day": "12", "title": "イベント12", "type": "green" },
{ "day": "14", "title": "イベント13" },
{ "day": "14", "title": "イベント14", "type": "red" },
{ "day": "15", "title": "イベント15", "type": "blue" },
{ "day": "17", "title": "イベント16" },
{ "day": "19", "title": "イベント17", "type": "blue" },
{ "day": "21", "title": "イベント18" },
{ "day": "24", "title": "イベント19", "type": "red" },
{ "day": "24", "title": "イベント20" },
{ "day": "26", "title": "イベント21", "type": "green" },
{ "day": "28", "title": "イベント22", "type": "blue" },
{ "day": "28", "title": "イベント23" },
{ "day": "28", "title": "イベント24", "type": "green" },
{ "day": "29", "title": "イベント25", "type": "red" },
{ "day": "29", "title": "イベント26" }
],
"holiday": ["3","4","5"]

}