Jingga/oms-Calendar
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Calendar.git synced 2026-02-14 15:38:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve calendar view a little bit

Browse Source
This commit is contained in:
Dennis Eichhorn 2017-08-08 21:03:51 +02:00
parent b54206958d
commit 73fdc8c285
6 changed files with 305 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Controller.php
View File

@ -25,6 +25,7 @@ use phpOMS\Module\ModuleAbstract;
use phpOMS\Module\WebInterface; use phpOMS\Module\WebInterface;
use phpOMS\Views\View; use phpOMS\Views\View;
use phpOMS\Views\ViewLayout; use phpOMS\Views\ViewLayout;
use phpOMS\Asset\AssetType;
/** /**
* Calendar controller class. * Calendar controller class.
@ -90,6 +91,10 @@ class Controller extends ModuleAbstract implements WebInterface
*/ */
public function viewCalendarDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable public function viewCalendarDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable
{ {
/** @var Head $head */
$head = $response->get('Content')->getData('head');
$head->addAsset(AssetType::CSS, $request->getUri()->getBase() . 'Modules/Calendar/Theme/Backend/css/styles.css');
$view = new View($this->app, $request, $response); $view = new View($this->app, $request, $response);
$view->setTemplate('/Modules/Calendar/Theme/Backend/calendar-dashboard'); $view->setTemplate('/Modules/Calendar/Theme/Backend/calendar-dashboard');
$view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1001201001, $request, $response)); $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1001201001, $request, $response));
@ -115,6 +120,10 @@ class Controller extends ModuleAbstract implements WebInterface
*/ */
public function viewDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable public function viewDashboard(RequestAbstract $request, ResponseAbstract $response, $data = null) : \Serializable
{ {
/** @var Head $head */
$head = $response->get('Content')->getData('head');
$head->addAsset(AssetType::CSS, $request->getUri()->getBase() . 'Modules/Calendar/Theme/Backend/css/styles.css');
$view = new View($this->app, $request, $response); $view = new View($this->app, $request, $response);
$view->setTemplate('/Modules/Calendar/Theme/Backend/dashboard-calendar'); $view->setTemplate('/Modules/Calendar/Theme/Backend/dashboard-calendar');

7
Theme/Backend/Lang/en.lang.php
View File

@ -25,4 +25,11 @@ return ['Calendar' => [
'Timeline' => 'Timeline', 'Timeline' => 'Timeline',
'Week' => 'Week', 'Week' => 'Week',
'Year' => 'Year', 'Year' => 'Year',
'Sunday' => 'Sunday',
'Monday' => 'Monday',
'Tuesday' => 'Tuesday',
'Wednesday' => 'Wednesday',
'Thursday' => 'Thursday',
'Friday' => 'Friday',
'Saturday' => 'Saturday',
]]; ]];

148
Theme/Backend/calendar-dashboard.tpl.php
View File

@ -1,82 +1,96 @@
<?php <?php
$calendar = $this->getData('calendar'); $calendar = $this->getData('calendar');
?> ?>
<section class="wf-75 floatLeft"> <div class="row">
<div class="box w-100"> <div class="col-xs-12 col-md-9">
<ul class="btns floatLeft"> <div class="box wf-100">
<li><a href="<?= htmlspecialchars(\phpOMS\Uri\UriFactory::build('{/base}/{/lang}/backend/calendar/dashboard?date=' . $calendar->getDate()->createModify(0, -1, 0)->format('Y-m-d')), ENT_COMPAT, 'utf-8'); ?>"><i class="fa fa-arrow-left"></i></a> <ul class="btns floatLeft">
<li><a href="<?= htmlspecialchars(\phpOMS\Uri\UriFactory::build('{/base}/{/lang}/backend/calendar/dashboard?date=' . $calendar->getDate()->createModify(0, 1, 0)->format('Y-m-d')), ENT_COMPAT, 'utf-8'); ?>"><i class="fa fa-arrow-right"></i></a> <li><a href="<?= htmlspecialchars(\phpOMS\Uri\UriFactory::build('{/base}/{/lang}/backend/calendar/dashboard?date=' . $calendar->getDate()->createModify(0, -1, 0)->format('Y-m-d')), ENT_COMPAT, 'utf-8'); ?>"><i class="fa fa-arrow-left"></i></a>
</ul> <li><a href="<?= htmlspecialchars(\phpOMS\Uri\UriFactory::build('{/base}/{/lang}/backend/calendar/dashboard?date=' . $calendar->getDate()->createModify(0, 1, 0)->format('Y-m-d')), ENT_COMPAT, 'utf-8'); ?>"><i class="fa fa-arrow-right"></i></a>
<ul class="btns floatRight"> </ul>
<li><a href=""><?= $this->getHtml('Day'); ?></a> <ul class="btns floatRight">
<li><a href=""><?= $this->getHtml('Week'); ?></a> <li><a href=""><?= $this->getHtml('Day'); ?></a>
<li><a href=""><?= $this->getHtml('Month'); ?></a> <li><a href=""><?= $this->getHtml('Week'); ?></a>
<li><a href=""><?= $this->getHtml('Year'); ?></a> <li><a href=""><?= $this->getHtml('Month'); ?></a>
</ul> <li><a href=""><?= $this->getHtml('Year'); ?></a>
</div> </ul>
<div class="box w-100"> </div>
<div id="calendar" class="m-calendar-month" data-action='[ <div class="box wf-100">
{ <div id="calendar" class="m-calendar" data-action='[
"listener": "click", "selector": "#calendar span.tag", "action": [ {
{"key": 1, "type": "dom.popup", "tpl": "calendar-event-popup-tpl", "aniIn": "fadeIn"} "listener": "click", "selector": "#calendar span.tag", "action": [
] {"key": 1, "type": "dom.popup", "tpl": "calendar-event-popup-tpl", "aniIn": "fadeIn"}
} ]
]'> }
<?php $current = new \phpOMS\Datatypes\SmartDateTime($calendar->getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); for($i = 0; $i < 6; $i++) : ?> ]'>
<div class="wf-100"> <ul class="weekdays green">
<?php for($j = 0; $j < 7; $j++) : ?> <li><?= $this->getHtml('Sunday'); ?>
<div contextmenu="calendar-day-menu" style="display: inline-block; box-sizing: border-box; width: 13.0%; height: 100px; border: 1px solid #000; margin: 0; padding: 3px; overflow: hidden"> <li><?= $this->getHtml('Monday'); ?>
<?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) { <li><?= $this->getHtml('Tuesday'); ?>
echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1); <li><?= $this->getHtml('Wednesday'); ?>
} else { <li><?= $this->getHtml('Thursday'); ?>
echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1); <li><?= $this->getHtml('Friday'); ?>
} ?> <li><?= $this->getHtml('Saturday'); ?>
<ul> </ul>
<?php $current = new \phpOMS\Datatypes\SmartDateTime($calendar->getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01');
for($i = 0; $i < 6; $i++) : ?>
<ul class="days">
<?php for($j = 0; $j < 7; $j++) : ?>
<?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) : ?>
<li class="day">
<div class="date"><?= ($i*7+$j+1); ?></div>
<?php else: ?>
<li class="day other-month">
<div class="date"><?= $current->createModify(0, 0, -2)->format('d'); ?></div>
<?php endif; ?>
<?php <?php
$events = $calendar->getEventByDate($current); $events = $calendar->getEventByDate($current);
$current->smartModify(0, 0, 1); $current->smartModify(0, 0, 1);
foreach($events as $event) : ?> foreach($events as $event) : ?>
<li><span id="event-tag-<?= htmlspecialchars($event->getId(), ENT_COMPAT, 'utf-8'); ?>" class="tag purple" style="white-space: nowrap;"><?= htmlspecialchars($event->getName(), ENT_COMPAT, 'utf-8'); ?></span> <div id="event-tag-<?= htmlspecialchars($event->getId(), ENT_COMPAT, 'utf-8'); ?>" class="event">
<?php endforeach; ?> <div class="event-desc"><?= htmlspecialchars($event->getName(), ENT_COMPAT, 'utf-8'); ?></div>
</ul> <div class="event-time">2:00pm to 5:00pm</div>
</div> </div>
<?php endfor; ?> <?php endforeach; ?>
</div> <?php endfor; ?>
<?php endfor;?> </li>
</ul>
<?php endfor;?>
</div>
</div> </div>
</div> </div>
</section>
<section class="wf-25 floatLeft"> <div class="col-xs-12 col-md-3">
<section class="box w-100"> <section class="box wf-100">
<header><h1>Title</h1></header> <header><h1>Title</h1></header>
<div class="inner"> <div class="inner">
<form> <form>
<table class="layout wf-100"> <table class="layout wf-100">
<tr> <tr>
<td><label>Layout</label> <td><label>Layout</label>
<tr> <tr>
<td><select> <td><select>
<option> <option>
</select> </select>
</table> </table>
</form> </form>
</div> </div>
</section> </section>
<section class="box w-100"> <section class="box wf-100">
<header><h1>Calendars</h1></header> <header><h1>Calendars</h1></header>
<div class="inner"> <div class="inner">
<ul class="boxed"> <ul class="boxed">
<li><i class="fa fa-times warning"></i> <span class="check"><input type="checkbox" id="iDefault" checked><label for="iDefault">Default</label></span><i class="fa fa-cogs floatRight"></i> <li><i class="fa fa-times warning"></i> <span class="check"><input type="checkbox" id="iDefault" checked><label for="iDefault">Default</label></span><i class="fa fa-cogs floatRight"></i>
</ul> </ul>
<div class="spacer"></div> <div class="spacer"></div>
<button><i class="fa fa-calendar-plus-o"></i> <?= $this->getHtml('Add', 0, 0); ?></button> <button><i class="fa fa-calendar-check-o"></i> <?= $this->getHtml('Create', 0, 0); ?></button> <button><i class="fa fa-calendar-plus-o"></i> <?= $this->getHtml('Add', 0, 0); ?></button> <button><i class="fa fa-calendar-check-o"></i> <?= $this->getHtml('Create', 0, 0); ?></button>
</div> </div>
</section> </section>
</section> </div>
</div>
<menu type="context" id="calendar-day-menu"> <menu type="context" id="calendar-day-menu">
<menuitem label="<?= $this->getHtml('NewEvent'); ?>"></menuitem> <menuitem label="<?= $this->getHtml('NewEvent'); ?>"></menuitem>

71
Theme/Backend/css/styles.css Normal file
View File

@ -0,0 +1,71 @@
.m-calendar {
width: 100%; }
.m-calendar ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%; }
.m-calendar ul.weekdays {
height: 40px; }
.m-calendar ul.weekdays li {
text-align: center;
text-transform: uppercase;
line-height: 20px;
border: none;
color: #fff;
padding: 10px 6px;
font-size: 13px; }
.m-calendar li {
display: block;
float: left;
width: 14.285%;
padding: 5px;
box-sizing: border-box;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; }
.m-calendar li:first-child {
border-left: 1px solid #ccc; }
.m-calendar .days li {
height: 150px;
overflow-y: auto; }
.m-calendar .days li:hover {
background: #d3d3d3; }
.m-calendar .date {
text-align: center;
margin-bottom: 5px;
font-size: 0.7rem;
color: #333;
float: right; }
.m-calendar .event {
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 5px;
background: #e4f2f2;
border: 1px solid #b5dbdc;
color: #009aaf;
text-decoration: none; }
.m-calendar .event-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
overflow: hidden; }
.m-calendar .event-time {
font-size: 0.7rem; }
.m-calendar .other-month {
background: #f5f5f5;
color: #666; }
@media (max-width: 768px) {
.m-calendar .weekdays, .m-calendar .other-month {
display: none; }
.m-calendar li {
height: auto !important;
border: 1px solid #ededed;
width: 100%;
padding: 10px;
margin-bottom: -1px; }
.m-calendar .date {
float: none; } }

104
Theme/Backend/css/styles.scss Normal file
View File

@ -0,0 +1,104 @@
.m-calendar {
width: 100%;
ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
&.weekdays {
height: 40px;
li {
text-align: center;
text-transform: uppercase;
line-height: 20px;
border: none;
color: #fff;
padding: 10px 6px;
font-size: 13px;
}
}
}
li {
display: block;
float: left;
width:14.285%;
padding: 5px;
box-sizing: border-box;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&:first-child {
border-left: 1px solid #ccc;
}
}
.days li {
height: 150px;
overflow-y: auto;
&:hover {
background: #d3d3d3;
}
}
.date {
text-align: center;
margin-bottom: 5px;
font-size: 0.7rem;
color: #333;
float: right;
}
.event {
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 5px;
background: #e4f2f2;
border: 1px solid #b5dbdc;
color: #009aaf;
text-decoration: none;
}
.event-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
overflow: hidden;
}
.event-time {
font-size: 0.7rem;
}
.other-month {
background: #f5f5f5;
color: #666;
}
}
@media(max-width: 768px) {
.m-calendar {
.weekdays, .other-month {
display: none;
}
li {
height: auto !important;
border: 1px solid #ededed;
width: 100%;
padding: 10px;
margin-bottom: -1px;
}
.date {
float: none;
}
}
}

55
Theme/Backend/dashboard-calendar.tpl.php
View File

@ -1,33 +1,44 @@
<?php <?php
$calendar = $this->getData('calendar'); $calendar = $this->getData('calendar');
?> ?>
<div id="calendar" class="m-calendar-month" data-action='[ <div id="calendar" class="m-calendar col-xs-12 col-md-6" draggable="true" data-action='[
{ {
"listener": "click", "selector": "#calendar span.tag", "action": [ "listener": "click", "selector": "#calendar span.tag", "action": [
{"key": 1, "type": "dom.popup", "tpl": "calendar-event-popup-tpl", "aniIn": "fadeIn"} {"key": 1, "type": "dom.popup", "tpl": "calendar-event-popup-tpl", "aniIn": "fadeIn"}
] ]
} }
]'> ]'>
<?php $current = new \phpOMS\Datatypes\SmartDateTime($calendar->getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01'); <ul class="weekdays green">
for($i = 0; $i < 6; $i++) : ?> <li><?= $this->getHtml('Sunday'); ?>
<div class="wf-100"> <li><?= $this->getHtml('Monday'); ?>
<?php for($j = 0; $j < 7; $j++) : ?> <li><?= $this->getHtml('Tuesday'); ?>
<div contextmenu="calendar-day-menu" style="display: inline-block; box-sizing: border-box; width: 13.0%; height: 50px; border: 1px solid #000; margin: 0; padding: 3px; overflow: hidden"> <li><?= $this->getHtml('Wednesday'); ?>
<?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) { <li><?= $this->getHtml('Thursday'); ?>
echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1); <li><?= $this->getHtml('Friday'); ?>
} else { <li><?= $this->getHtml('Saturday'); ?>
echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1); </ul>
} ?> <?php $current = new \phpOMS\Datatypes\SmartDateTime($calendar->getDate()->format('Y') . '-' . $calendar->getDate()->format('m') . '-' . '01');
<ul> for($i = 0; $i < 6; $i++) : ?>
<?php <ul class="days">
$events = $calendar->getEventByDate($current); <?php for($j = 0; $j < 7; $j++) : ?>
$current->smartModify(0, 0, 1); <?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) : ?>
foreach($events as $event) : ?> <li class="day">
<li><span id="event-tag-<?= htmlspecialchars($event->getId(), ENT_COMPAT, 'utf-8'); ?>" class="tag purple" style="white-space: nowrap;"><?= htmlspecialchars($event->getName(), ENT_COMPAT, 'utf-8'); ?></span> <div class="date"><?= ($i*7+$j+1); ?></div>
<?php else: ?>
<li class="day other-month">
<div class="date"><?= $current->createModify(0, 0, -2)->format('d'); ?></div>
<?php endif; ?>
<?php
$events = $calendar->getEventByDate($current);
$current->smartModify(0, 0, 1);
foreach($events as $event) : ?>
<div id="event-tag-<?= htmlspecialchars($event->getId(), ENT_COMPAT, 'utf-8'); ?>" class="event">
<div class="event-desc"><?= htmlspecialchars($event->getName(), ENT_COMPAT, 'utf-8'); ?></div>
<div class="event-time">2:00pm to 5:00pm</div>
</div>
<?php endforeach; ?> <?php endforeach; ?>
</ul> <?php endfor; ?>
</div> </li>
<?php endfor; ?> </ul>
<?php endfor;?>
</div> </div>
<?php endfor;?>
</div>