Material Design Calendar
How do I make an material design calendar?
What is a material design calendar? How do you make a material design calendar? This script and codes were developed by Simeon Simeonoff on 01 October 2022, Saturday.
Material Design Calendar Previews
Material Design Calendar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Calendar</title> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cal-wrapper"> <div class="igx-calendar"> <div class="igx-calendar__header"> <h5 class="igx-calendar__header-year">2017</h5> <h2 class="igx-calendar__header-date">Sat, Jun 24</h2> </div> <div class="igx-calendar__body"> <div class="igx-calendar__body-picker"> <span class="prev"> <i class="material-icons">keyboard_arrow_left</i> </span> <span class="date"> June 2017 </span> <span class="next"> <i class="material-icons">keyboard_arrow_right</i> </span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__label">M</span> <span class="igx-calendar__label">T</span> <span class="igx-calendar__label">W</span> <span class="igx-calendar__label">T</span> <span class="igx-calendar__label">F</span> <span class="igx-calendar__label">S</span> <span class="igx-calendar__label">S</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date--inactive">29</span> <span class="igx-calendar__date--inactive">30</span> <span class="igx-calendar__date--inactive">31</span> <span class="igx-calendar__date">1</span> <span class="igx-calendar__date">2</span> <span class="igx-calendar__date--weekend">3</span> <span class="igx-calendar__date--weekend">4</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date">5</span> <span class="igx-calendar__date">6</span> <span class="igx-calendar__date">7</span> <span class="igx-calendar__date">8</span> <span class="igx-calendar__date">9</span> <span class="igx-calendar__date--weekend">10</span> <span class="igx-calendar__date--weekend">11</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date">12</span> <span class="igx-calendar__date">13</span> <span class="igx-calendar__date">14</span> <span class="igx-calendar__date--current">15</span> <span class="igx-calendar__date">16</span> <span class="igx-calendar__date--weekend">17</span> <span class="igx-calendar__date--weekend">18</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date">19</span> <span class="igx-calendar__date">20</span> <span class="igx-calendar__date">21</span> <span class="igx-calendar__date">22</span> <span class="igx-calendar__date">23</span> <span class="igx-calendar__date--selected">24</span> <span class="igx-calendar__date--weekend">25</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date">26</span> <span class="igx-calendar__date">27</span> <span class="igx-calendar__date">28</span> <span class="igx-calendar__date">29</span> <span class="igx-calendar__date">30</span> <span class="igx-calendar__date--weekend">1</span> <span class="igx-calendar__date--weekend">2</span> </div> <div class="igx-calendar__body-row"> <span class="igx-calendar__date--inactive">3</span> <span class="igx-calendar__date--inactive">4</span> <span class="igx-calendar__date--inactive">5</span> <span class="igx-calendar__date--inactive">6</span> <span class="igx-calendar__date--inactive">7</span> <span class="igx-calendar__date--inactive">8</span> <span class="igx-calendar__date--inactive">9</span> </div> </div> </div>
</div>
</body>
</html>
Material Design Calendar - Script Codes CSS Codes
*, html { box-sizing: border-box; font-size: 16px; font-family: 'Titillium Web';
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.igx-calendar, .igx-calendar--vertical { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column nowrap; flex-flow: column nowrap; width: 100%; overflow: hidden;
}
@media only screen and (min-width: 540px) { .igx-calendar, .igx-calendar--vertical { -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .igx-calendar .igx-calendar__header, .igx-calendar--vertical .igx-calendar__header { max-width: 168px; min-width: 148px; }
}
.igx-calendar--vertical { -ms-flex-flow: row nowrap; flex-flow: row nowrap;
}
.igx-calendar--vertical .igx-calendar__header { max-width: 168px; min-width: 148px;
}
.igx-calendar__header { background-color: #0375BE; color: #fff; padding: 24px 16px;
}
.igx-calendar__header-year { color: rgba(255, 255, 255, 0.8); font-size: 18px;
}
.igx-calendar__header-date { font-size: 38px; line-height: 45px; letter-spacing: 2px;
}
.igx-calendar__body-picker { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px;
}
.igx-calendar__body-picker .next, .igx-calendar__body-picker .prev { color: #484848; cursor: pointer;
}
.igx-calendar__body-picker .next:hover, .igx-calendar__body-picker .prev:hover { color: #000;
}
.igx-calendar__body-picker .date { font-size: 18px; line-height: 22px; font-weight: 600; text-align: center;
}
.igx-calendar__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-bottom: 24px;
}
.igx-calendar__body-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 16px;
}
.igx-calendar__label, .igx-calendar__date, .igx-calendar__date--inactive, .igx-calendar__date--selected, .igx-calendar__date--current, .igx-calendar__date--weekend { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; height: 40px; margin: 2px; font-size: 16px; line-height: 22px; border-radius: 20px; color: #000; cursor: pointer; -webkit-transition: background .15s ease-out; transition: background .15s ease-out;
}
.igx-calendar__label { color: #BDBDBD; cursor: default;
}
.igx-calendar__date--weekend { color: #BDBDBD;
}
.igx-calendar__date--inactive { color: #BDBDBD;
}
.igx-calendar__date--selected { color: #fff; background-color: #0375BE;
}
.igx-calendar__date--current { color: #0375BE; font-weight: 600;
}
.igx-calendar__date--inactive:hover, .igx-calendar__date--current:hover, .igx-calendar__date--weekend:hover, .igx-calendar__date:hover { background-color: rgba(189, 189, 189, 0.15);
}
.cal-wrapper { box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12); width: 100%; min-width: 320px;
}
.igx-calendar__date--inactive { cursor: pointer;
}
| Developer | Simeon Simeonoff |
| Username | simeonoff |
| Uploaded | October 01, 2022 |
| Rating | 3 |
| Size | 4,021 Kb |
| Views | 20,240 |
Do you need developer help for Material Design Calendar?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Simeon Simeonoff (simeonoff) Script Codes
| Name | Size |
| Flexbox SASS Grid | 4,135 Kb |
| Notification Animation - Bounce Blur | 2,664 Kb |
| Material Switches | 2,691 Kb |
| Grid Layout | 2,845 Kb |
| Toggle Buttons | 2,666 Kb |
| Material Inputs | 3,313 Kb |
| Notification Animation | 2,603 Kb |
| Material Radio Buttons | 2,938 Kb |
| Avatar | 2,309 Kb |
| Material Checkboxes | 3,262 Kb |
Create amazing art & images with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Add This API | ThatGuySam | 2,848 Kb |
| Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
| Basic template | Tomcat | 1,675 Kb |
| A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
| CSS3 Media Queries demo | Machal | 1,824 Kb |
| Svg sky | Omodev | 7,070 Kb |
| CSS Google Now | Jackmoran | 3,196 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
| Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
| A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!