Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-27 05:24:38 +04:00
Code Issues Projects Releases Wiki Activity

fullcalendar ui fixes

Browse Source
This commit is contained in:
codecalm
2019-10-30 20:45:35 +01:00
committed by Alex Safian
parent da32be1382
commit ffde422563
7 changed files with 142 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_includes/layout/page-title.html
+8 -4
View File
@@ -25,10 +25,14 @@
<!-- Page title actions -->
<div class="col-auto ml-auto">
{% if page.page-title-actions == 'users' %}
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>
<div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
{% include ui/button.html text="New user" color="primary" icon="plus" %}
</div>
{% elsif page.page-title-actions == 'calendar' %}
<div class="d-flex">
{% include ui/button.html text="Add event" color="primary" icon="plus" %}
</div>
{% else %}
<span class="d-none d-sm-inline">
{% include ui/button.html text="New view" color="secondary" icon="plus" %}
pages/_includes/ui/fullcalendar.html
+62 -6
View File
@@ -1,29 +1,85 @@
{% assign calendar-id = include.calendar-id | default: 'main' %}
<div id="calendar-{{ calendar-id }}"></div>
<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>
{% capture_global scripts %}
<script>
document.addEventListener('DOMContentLoaded', function () {
{% if jekyll.environment == 'development' %}window.tabler_calendar = window.tabler_calendar || {};{% endif %}
var calendarEl = document.getElementById('calendar-{{ calendar-id }}');
var calendarEl = document.getElementById('calendar-{{ calendar-id }}'),
today = new Date(),
y = today.getFullYear(),
m = today.getMonth(),
d = today.getDate();
window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
plugins: [ 'interaction', 'dayGrid' ],
themeSystem: 'standard',
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
left: 'title',
center: '',
right: 'prev,next'
},
selectable: true,
selectHelper: true,
nowIndicator: true,
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
defaultView: 'dayGridMonth',
timeFormat: 'H(:mm)',
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 7, 6, 0),
allDay: false,
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 14, 6, 0),
allDay: false,
className: 'bg-lime-lt'
},
{
title: 'Meeting',
start: new Date(y, m, 4, 10, 30),
allDay: false,
className: 'bg-green-lt'
},
{
title: 'Lunch',
start: new Date(y, m, 5, 12, 0),
end: new Date(y, m, 5, 14, 0),
allDay: false,
className: 'bg-red-lt'
},
{
title: 'LBD Launch',
start: new Date(y, m, 19, 12, 0),
allDay: true,
className: 'bg-azure-lt'
},
{
title: 'Birthday Party',
start: new Date(y, m, 16, 19, 0),
end: new Date(y, m, 16, 22, 30),
allDay: false,
className: 'bg-orange-lt'
}
]
})).render();
});
</script>
pages/calendar.html
+1
View File
@@ -1,6 +1,7 @@
---
title: Calendar
page-title: Calendar
page-title-actions: calendar
menu: calendar
---
scss/_variables.scss
+6 -6
View File
@@ -128,12 +128,12 @@ $headings-font-weight: 600 !default;
$small-font-size: 87.5% !default;
$h1-font-size: (26em / 16) !default;
$h2-font-size: (21em / 16) !default;
$h3-font-size: (18em / 16) !default;
$h4-font-size: (16em / 16) !default;
$h5-font-size: (14em / 16) !default;
$h6-font-size: (12em / 16) !default;
$h1-font-size: (26rem / 16) !default;
$h2-font-size: (21rem / 16) !default;
$h3-font-size: (18rem / 16) !default;
$h4-font-size: (16rem / 16) !default;
$h5-font-size: (14rem / 16) !default;
$h6-font-size: (12rem / 16) !default;
$blockquote-font-size: $h4-font-size !default;
scss/tabler.scss
+1
View File
@@ -54,6 +54,7 @@
@import "vendor/jqvmap";
@import "vendor/apexcharts";
@import "vendor/sparkline";
@import "vendor/fullcalendar";
@import "utils/border";
@import "utils/background";
scss/ui/_nav.scss
+1
View File
@@ -46,6 +46,7 @@
.icon {
display: block;
stroke-width: 1.5;
}
}
scss/vendor/_fullcalendar.scss
Vendored
+63
View File
@@ -0,0 +1,63 @@
.fc-unthemed {
.fc-content,
.fc-divider,
.fc-list-heading td,
.fc-list-view,
.fc-popover,
.fc-row,
tbody,
td,
th,
thead {
border-color: $border-color;
}
.fc-toolbar {
h2 {
font-size: $h2-font-size;
margin: 0;
}
}
.fc-button {
@include button-variant(#ffffff, $border-color, $text-muted);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
@include transition($btn-transition);
}
.fc-widget-header {
border: 0;
}
.fc-day-header {
padding-bottom: .25rem;
font-weight: 600;
}
&.card-calendar {
.fc-day-grid-container {
border-bottom: 0;
border-left: 0;
td:last-child {
//border-right: 0;
}
td:first-child {
//border-left: 0;
}
}
}
.fc-time {
font-weight: 600;
}
.fc-event {
border-color: rgba(0, 0, 0, .05);
color: $primary;
background-color: theme-color-lighter($primary);
padding: 0 .25rem;
}
}