<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no">
<title>Pdf Calendar</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<style>
@page {
size: A4;
margin: 0;
}
.calendar td {
border-left: none !important;
border-right: none !important;
}
.calendar th {
height: 20px !important;
padding: 18px 40px !important;
}
.time-slot-wrp {
width: 2000px;
height: 60px;
position: absolute;
left: 0px;
z-index: 9;
}
.four-row .single {
border-radius: 5px;
padding: 3px 30px;
height: 21%;
display: table-cell;
vertical-align: middle;
}
.four-row .double {
border-radius: 15px;
padding: 3px 30px;
height: 46%;
display: table-cell;
vertical-align: middle;
}
.four-row .tripple {
border-radius: 20px;
padding: 3px 30px;
height: 75%;
display: table-cell;
vertical-align: middle;
}
.four-row .full {
border-radius: 25px;
padding: 3px 30px;
height: 100%;
display: table-cell;
vertical-align: middle;
}
.four-row {
width: 100%;
display: inline-block;
height: 100%;
}
.slot-cards {
display: inline-block;
height: 56px;
vertical-align: middle;
position: relative;
}
.four-row .single {
line-height: 11px;
}
.vertical-center {
display: table-cell;
vertical-align: middle;
/* height: 60px; */
}
.four-row .double .vertical-center {
height: 27px;
}
@media print {
body {
-webkit-print-color-adjust: exact;
}
}
</style>
</head>
<body style="margin: 0;">
<% data.results.forEach((day)=> { %>
<div class="pdf-wrp" style="width: 100%; background-color: #fff;">
<header class="header" style="display:block; padding-top: 30px;padding-bottom: 50px; padding: 30px 37px;">
<div class="logo" style="display: block; float: left;">
<img style="height: 65px; margin: 0; border: none;" src="<%= data.base64Images[0] %>" alt="Calendar Logo">
</div>
<div class="txt"
style="display: block; float: right; font-family: 'Inter','Arial'; font-weight: 500; font-size: 30px; margin-top: 15px; position: absolute; text-align: center; width: 96%;">
<%= day.dayFormat %>
</div>
<div style="clear:both"></div>
</header>
<div class="inner-wrp" style="padding: 30px 37px;">
<table class="calendar"
style="width:100%; cellspacing:0; cellpadding:0; border-collapse: collapse; border:1px solid #D6DADE;">
<% day.hours.forEach(function(hour) { %>
<tr>
<th
style="font-family: 'Inter','Arial'; font-weight: 500; font-size: 20px; border:1px solid #CECECE; padding: 20px 30px 20px; background-color: #F3F5F7; border-top-left-radius: 5px; border-bottom-left-radius: 5px; color: #31363E; width:113px; text-align: center ; height:69px">
<%= hour %>
</th>
<td
style="font-family: Inter; font-weight: 500; font-size: 16px; border:1px solid #CECECE; padding: 0px; position: relative;">
<div class="time-slot-wrp" style="position: absolute; top: 0px;">
<% if (day.groupedEvents[hour]) { %>
<% day.groupedEvents[hour].forEach(function(event) { if(event?.isHidden){ %>
<div class="slot-cards full-height" style="
background-color: transparent;
width: auto; height:0px">
<div class="vertical-center">
<div style="display: inline-block;
vertical-align: middle;
padding: <%= event.height > 60 ? '0px 35px' : (event.height < 30 ? '0px 35px !important' : '0px 35px') %>;
visibility: hidden;">
<%= event.start_time %> - <%= event.end_time %>
<span style="font-size: <%= event.height <= 15 ? '8px' : '14px'%>;">
<%= event.event_title %>
</span>
</div>
</div>
</div>
<% } else { %>
<div class="slot-cards full-height" style="border-radius: <%= event.height > 60 ? '15px' : '10px' %>;
border: 1px solid #FFFFFF;
background-color: <%= event.color %>;
height: <%= event.height %>px;
width: auto;
font-family: 'Inter','Arial';
font-weight: 500;
color: <%= event.color == '#ffe074' ? '#000' : '#fff' %>;
top: <%= event.top %>px;">
<div class="vertical-center" style="height: <%= event.height > 60 ? '27px' : 'auto' %>;">
<div style="display:<%= event.height <= 15 ? 'block' :'inline-block' %> ;
vertical-align: middle;
padding: <%= event.height > 60 ? '20px 40px' : (event.height <= 15 ? '1px 30px' : '5px 30px') %>;
font-size: <%= event.height <= 15 ? '14px' : '14px'%>;
line-height: <%= event.height > 60 ? 'normal' : '' %>;
">
<%= event.start_time %> - <%= event.end_time %>
<span style="font-size: <%= event.height <= 15 ? '14px' : '14px'%>;">
<%= event.event_title %>
</span>
</div>
</div>
</div>
<% } }); %>
<% } %>
</div>
</td>
</tr>
<% }); %>
</table>
</div>
<% }); // End of days loop %>
<!-- BRANDING -->
<div class="pdf-wrp" style="width: 109%; padding-left: 35px; background-color: #fff">
<header class="header" style="display: block">
<div style="padding: 30px 0 0; display: block">
<h2 style="
font-family: 'Inter', Arial;
font-size: 40px;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
margin-left: 60;
">
Branding
</h2>
</div>
</header>
<div class="inner-wrp" style="padding: 0px 0 30px; display: block">
<div style="border: 1px solid #d6dade; display: block">
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Core Schedule
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #2e6db2;
border-radius: 10px;
padding: 10px;
color: #fff;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 16px;
margin-right: 10px;
">
#2e6db2
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #2e6db2;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">4:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Sleep Pattern
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #2e6db2;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">4:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Energy Patterns
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #2e6db2;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">4:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Work Schedule
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #2e6db2;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">4:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Meal Schedule
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Health & Wellness
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #6abb73;
border-radius: 10px;
padding: 10px;
color: #fff;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 16px;
margin-right: 10px;
">
#6abb73
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #6abb73;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">11:00 PM - 12:30 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Exercise & Physical
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #6abb73;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">11:00 PM - 12:030 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Mental Wellness
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #697280;
background-color: #6abb73;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">11:00 PM - 12:30 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Health Maintenance
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Leisure & Recreation
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #faa357;
border-radius: 10px;
padding: 10px;
color: #fff;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 16px;
margin-right: 10px;
">
#faa357
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left"></div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #697280;
background-color: #faa357;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Leisure Time
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #697280;
background-color: #faa357;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Vaccation <br />Planning
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Personal Development & Learning
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #ffe074;
border-radius: 10px;
padding: 10px;
color: #4a556e;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 16px;
margin-right: 10px;
">
#ffe074
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left"></div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #5e5e5e;
background-color: #ffe074;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #5e5e5e;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #5e5e5e;
font-size: 13px;
font-weight: 500px;
">
Personal Development & Learning
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Relationships & Social
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #f56767;
border-radius: 10px;
padding: 10px;
color: #fff;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 13px;
margin-right: 10px;
">
#f56767
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #f56767;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Family Time
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #f56767;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Partner Time
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #f56767;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">7:00 AM - 8:00 AM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Social Connections
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="row-blk" style="
padding: 24px 0px;
border-bottom: 1px solid #d6dade94;
width: 97%;
display: block;
">
<div class="left-col" style="width: 35%; display: block; float: left">
<div class="title" style="
color: #4a556e;
font-weight: 600;
font-family: 'Inter', Arial;
font-size: 16px;
margin-bottom: 20px;
padding-left: 20px;
">
Household & Routine Maintenance
</div>
<div class="brand-wrp" style="display: block; padding: 0 20px">
<div style="
display: block;
float: left;
width: 35%;
background-color: #55cfd4;
border-radius: 10px;
padding: 10px;
color: #fff;
font-family: 'Inter', Arial;
font-weight: 600;
font-size: 16px;
margin-right: 10px;
">
#55cfd4
</div>
</div>
<div style="clear: both"></div>
</div>
<div class="rt-blk" style="width: 65%; display: block; float: left">
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #55cfd4;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">5:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Regular Maintenance
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #55cfd4;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">5:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Chores
</p>
</div>
<div style="
display: inline-block;
border-radius: 10px 10px 0 0;
color: #fff;
background-color: #55cfd4;
background-repeat: no-repeat;
background-size: cover;
font-size: 13px;
font-weight: 500;
font-family: 'Inter', Arial;
padding: 6px 16px 10px;
width: 15%;
margin-right: 10px;
height: 80px;
vertical-align: top;
">
<span style="
color: #fff;
font-weight: 500;
font-family: 'Inter', Arial;
font-size: 13px;
margin-bottom: 5px;
">5:00 PM - 6:00 PM</span>
<p style="
margin-bottom: 0px;
color: #fff;
font-size: 13px;
font-weight: 500px;
">
Additional Maintenance Tasks
</p>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
</div>
</body>
</html>