mirror of
https://github.com/Karaka-Management/oms-Calendar.git
synced 2026-01-30 00:18:40 +00:00
Improve calendar view a little bit
This commit is contained in:
parent
b54206958d
commit
73fdc8c285
|
|
@ -25,6 +25,7 @@ use phpOMS\Module\ModuleAbstract;
|
|||
use phpOMS\Module\WebInterface;
|
||||
use phpOMS\Views\View;
|
||||
use phpOMS\Views\ViewLayout;
|
||||
use phpOMS\Asset\AssetType;
|
||||
|
||||
/**
|
||||
* Calendar controller class.
|
||||
|
|
@ -90,6 +91,10 @@ class Controller extends ModuleAbstract implements WebInterface
|
|||
*/
|
||||
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->setTemplate('/Modules/Calendar/Theme/Backend/calendar-dashboard');
|
||||
$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
|
||||
{
|
||||
/** @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->setTemplate('/Modules/Calendar/Theme/Backend/dashboard-calendar');
|
||||
|
||||
|
|
|
|||
|
|
@ -25,4 +25,11 @@ return ['Calendar' => [
|
|||
'Timeline' => 'Timeline',
|
||||
'Week' => 'Week',
|
||||
'Year' => 'Year',
|
||||
'Sunday' => 'Sunday',
|
||||
'Monday' => 'Monday',
|
||||
'Tuesday' => 'Tuesday',
|
||||
'Wednesday' => 'Wednesday',
|
||||
'Thursday' => 'Thursday',
|
||||
'Friday' => 'Friday',
|
||||
'Saturday' => 'Saturday',
|
||||
]];
|
||||
|
|
|
|||
|
|
@ -1,82 +1,96 @@
|
|||
<?php
|
||||
$calendar = $this->getData('calendar');
|
||||
?>
|
||||
<section class="wf-75 floatLeft">
|
||||
<div class="box w-100">
|
||||
<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-left"></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-right"></i></a>
|
||||
</ul>
|
||||
<ul class="btns floatRight">
|
||||
<li><a href=""><?= $this->getHtml('Day'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Week'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Month'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Year'); ?></a>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box w-100">
|
||||
<div id="calendar" class="m-calendar-month" data-action='[
|
||||
{
|
||||
"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">
|
||||
<?php for($j = 0; $j < 7; $j++) : ?>
|
||||
<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">
|
||||
<?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) {
|
||||
echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1);
|
||||
} else {
|
||||
echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1);
|
||||
} ?>
|
||||
<ul>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-9">
|
||||
<div class="box wf-100">
|
||||
<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-left"></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-right"></i></a>
|
||||
</ul>
|
||||
<ul class="btns floatRight">
|
||||
<li><a href=""><?= $this->getHtml('Day'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Week'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Month'); ?></a>
|
||||
<li><a href=""><?= $this->getHtml('Year'); ?></a>
|
||||
</ul>
|
||||
</div>
|
||||
<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"}
|
||||
]
|
||||
}
|
||||
]'>
|
||||
<ul class="weekdays green">
|
||||
<li><?= $this->getHtml('Sunday'); ?>
|
||||
<li><?= $this->getHtml('Monday'); ?>
|
||||
<li><?= $this->getHtml('Tuesday'); ?>
|
||||
<li><?= $this->getHtml('Wednesday'); ?>
|
||||
<li><?= $this->getHtml('Thursday'); ?>
|
||||
<li><?= $this->getHtml('Friday'); ?>
|
||||
<li><?= $this->getHtml('Saturday'); ?>
|
||||
</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
|
||||
$events = $calendar->getEventByDate($current);
|
||||
$current->smartModify(0, 0, 1);
|
||||
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>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php endfor;?>
|
||||
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 endfor; ?>
|
||||
</li>
|
||||
</ul>
|
||||
<?php endfor;?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wf-25 floatLeft">
|
||||
<section class="box w-100">
|
||||
<header><h1>Title</h1></header>
|
||||
<div class="col-xs-12 col-md-3">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Title</h1></header>
|
||||
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td><label>Layout</label>
|
||||
<tr>
|
||||
<td><select>
|
||||
<option>
|
||||
</select>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td><label>Layout</label>
|
||||
<tr>
|
||||
<td><select>
|
||||
<option>
|
||||
</select>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="box w-100">
|
||||
<header><h1>Calendars</h1></header>
|
||||
<section class="box wf-100">
|
||||
<header><h1>Calendars</h1></header>
|
||||
|
||||
<div class="inner">
|
||||
<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>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="inner">
|
||||
<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>
|
||||
</ul>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<menu type="context" id="calendar-day-menu">
|
||||
<menuitem label="<?= $this->getHtml('NewEvent'); ?>"></menuitem>
|
||||
|
|
|
|||
71
Theme/Backend/css/styles.css
Normal file
71
Theme/Backend/css/styles.css
Normal 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
104
Theme/Backend/css/styles.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,33 +1,44 @@
|
|||
<?php
|
||||
$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": [
|
||||
{"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">
|
||||
<?php for($j = 0; $j < 7; $j++) : ?>
|
||||
<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">
|
||||
<?php if($calendar->getDate()->getFirstDayOfMonth() <= $i*7+$j+1 && $calendar->getDate()->getDaysOfMonth() >= $i*7+$j+1) {
|
||||
echo ($i*7+$j+1) . ' ' . jddayofweek($j, 1);
|
||||
} else {
|
||||
echo $current->createModify(0, 0, -2)->format('d') . ' ' . jddayofweek($j, 1);
|
||||
} ?>
|
||||
<ul>
|
||||
<?php
|
||||
$events = $calendar->getEventByDate($current);
|
||||
$current->smartModify(0, 0, 1);
|
||||
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>
|
||||
<ul class="weekdays green">
|
||||
<li><?= $this->getHtml('Sunday'); ?>
|
||||
<li><?= $this->getHtml('Monday'); ?>
|
||||
<li><?= $this->getHtml('Tuesday'); ?>
|
||||
<li><?= $this->getHtml('Wednesday'); ?>
|
||||
<li><?= $this->getHtml('Thursday'); ?>
|
||||
<li><?= $this->getHtml('Friday'); ?>
|
||||
<li><?= $this->getHtml('Saturday'); ?>
|
||||
</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
|
||||
$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; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
<?php endfor; ?>
|
||||
</li>
|
||||
</ul>
|
||||
<?php endfor;?>
|
||||
</div>
|
||||
<?php endfor;?>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user