Really simple example:
![[Image: w7ejo7.png]]()
Add to global.css
Comment out:
Add to headerinclude:
Edit Template: calendar_weekrow_day
Replace with
Edit Template: calendar_weekdayheader
Replace with:
Edit template: calendar
Replace with:
Add to global.css
Code:
@media (max-width:768px) {
.weekday_day_name strong {
display: none;
}
.calendar .tcat[width*="1"] {
padding: 1px;
}
[title="Sunday"]:after {
content: 'Sun';
}
[title="Monday"]:after {
content: 'Mon';
}
[title="Tuesday"]:after {
content: 'Tue';
}
[title="Wednesday"]:after {
content: 'Wed';
}
[title="Thursday"]:after {
content: 'Thu';
}
[title="Friday"]:after {
content: 'Fri';
}
[title="Saturday"]:after {
content: 'Sat';
}
.weekday_day_height {
height: 0px;
}
}
@media (min-width:768px) {
.weekday_day_height {
height: 100px;
}
}
@media (max-width:800px) {
.weekday_day_height {
height: 60px;
}
}
@media (max-width:600px) {
.weekday_day_height {
height: 50px;
}
}
@media (max-width:480px) {
.weekday_day_height {
height: 40px;
}
}
@media (max-width:320px) {
.weekday_day_height {
height: 30px;
}
}Comment out:
Code:
#container {
color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/* min-width: 990px; */
}
.wrapper {
width: 85%;
/* min-width: 970px; */
max-width: 1500px;
margin: auto auto;
}Add to headerinclude:
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">Edit Template: calendar_weekrow_day
Replace with
Code:
<td class="{$day_class} weekday_day_height" style="vertical-align: top;">
<div class="float_right smalltext"><a href="{$day_link}">{$day}</a></div>
<div class="clear">
{$day_birthdays}
{$day_events}
</div>
</td>Edit Template: calendar_weekdayheader
Replace with:
Code:
<td class="tcat weekday_day_name" align="center" width="14%" title="{$weekday_name}"><strong>{$weekday_name}</strong></td>Edit template: calendar
Replace with:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->calendar}</title>
{$headerinclude}
</head>
<body>
{$header}
<div class="container">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder calendar">
<thead>
<tr>
<td class="thead" colspan="8" style="text-align: center;"><a href="{$prev_link}" style="float: left;"><i class="fa fa-arrow-left"></i> </a><strong>{$monthnames[$month]} {$year}</strong><a href="{$next_link}" style="float: right;"><i class="fa fa-arrow-right"></i></a></td>
</tr>
<tr>
<td class="tcat"> </td>
{$weekday_headers}
</tr>
</thead>
<tbody>
{$calendar_rows}
</tbody>
</table>
<br>
<form action="calendar.php" method="post">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="trow1">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">{$addevent}</td>
<td align="right">
<span class="smalltext"><strong>{$lang->jump_month}</strong></span>
<select name="month">
<option value="{$month}">{$monthnames[$month]}</option>
<option value="{$month}">----------</option>
<option value="1">{$lang->alt_month_1}</option>
<option value="2">{$lang->alt_month_2}</option>
<option value="3">{$lang->alt_month_3}</option>
<option value="4">{$lang->alt_month_4}</option>
<option value="5">{$lang->alt_month_5}</option>
<option value="6">{$lang->alt_month_6}</option>
<option value="7">{$lang->alt_month_7}</option>
<option value="8">{$lang->alt_month_8}</option>
<option value="9">{$lang->alt_month_9}</option>
<option value="10">{$lang->alt_month_10}</option>
<option value="11">{$lang->alt_month_11}</option>
<option value="12">{$lang->alt_month_12}</option>
</select>
<select name="year">
<option value="{$year}">{$year}</option>
<option value="{$year}">----------</option>
{$yearsel}
</select>
{$gobutton}
<br>
{$calendar_jump}
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
{$footer}
</body>
</html>