Skip to content

Commit 16fa24d

Browse files
author
Yeliazar
committed
updated Calendar
1 parent 3765e0c commit 16fa24d

File tree

1 file changed

+24
-24
lines changed

1 file changed

+24
-24
lines changed

‎src/pages/Extra/Calendar/Calendar.vue

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class='calendar-page'>
33
<b-row>
4-
<b-col lg='4' xs='12' md='6'>
4+
<b-col lg='4' sm='12' md='6'>
55
<h1 class="page-title">
66
{{currentMonth}} - <span class="fw-semi-bold">{{currentDay}}</span>
77
</h1>
@@ -12,67 +12,67 @@
1212
class="external-event"
1313
data-event='{ "classNames": ["bg-success", "text-white"], "title": "Make a tea" }'
1414
>
15-
<i class="fa fa-circle fa-fw text-success ml-xs mr-xs"></i>
15+
<i class="fa fa-circle fa-fw text-success ms-1 me-1"></i>
1616
Make a tea
1717
</div>
1818
<div
1919
class="external-event"
2020
data-event='{ "classNames": ["bg-warning", "text-white"], "title": "Open windows" }'
2121
>
22-
<i class="fa fa-circle fa-fw text-warning ml-xs mr-xs"></i>
22+
<i class="fa fa-circle fa-fw text-warning ms-1 me-1"></i>
2323
Open windows
2424
</div>
2525
<div
2626
class="external-event"
2727
data-event='{ "classNames": ["bg-gray", "text-white"], "title": "Some stuff" }'
2828
>
29-
<i class="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs"></i>
29+
<i class="fa fa-circle-o fa-fw text-gray-light ms-1 me-1"></i>
3030
Some stuff
3131
</div>
3232
<div
3333
class="external-event"
3434
data-event='{ "classNames": ["bg-danger", "text-white"], "title": "Study UX engineering" }'
3535
>
36-
<i class="fa fa-square fa-fw text-danger ml-xs mr-xs"></i>
36+
<i class="fa fa-square fa-fw text-danger ms-1 me-1"></i>
3737
Study UX engineering
3838
</div>
3939
<div
4040
class="external-event"
4141
data-event='{ "classNames": ["bg-gray", "text-white"], "title": "Another stuff" }'
4242
>
43-
<i class="fa fa-circle-o fa-fw text-gray-light ml-xs mr-xs"></i>
43+
<i class="fa fa-circle-o fa-fw text-gray-light ms-1 me-1"></i>
4444
Another stuff
4545
</div>
4646
</div>
4747
</b-col>
48-
<b-col md='6' lg='8' xs='12'>
48+
<b-col md='6' lg='8' sm='12'>
4949
<Widget>
5050
<b-row class="calendar-controls">
5151
<b-col md='3'>
52-
<b-button-group class="mr-sm">
53-
<b-button variant="default" @click="prev">
52+
<b-button-group class="me-1">
53+
<b-button variant="gray-default" @click="prev">
5454
<i class="fa fa-angle-left"></i>
5555
</b-button>
56-
<b-button variant="default" @click="next">
56+
<b-button variant="gray-default" @click="next">
5757
<i class="fa fa-angle-right"></i>
5858
</b-button>
5959
</b-button-group>
60-
<b-button class="mt-2" variant="default" @click="today">
60+
<b-button variant="gray-default" @click="today">
6161
Today
6262
</b-button>
6363
</b-col>
64-
<b-col md='9' class="calendar-controls text-right">
64+
<b-col md='9' class="calendar-controls text-end">
6565
<b-button-group>
6666
<b-button
67-
variant="default" @click="changeView('dayGridMonth')"
67+
variant="gray-default" @click="changeView('dayGridMonth')"
6868
:class="{ active: calendarView === 'dayGridMonth' }"
6969
>Month</b-button>
7070
<b-button
71-
variant="default" @click="changeView('timeGridWeek')"
71+
variant="gray-default" @click="changeView('timeGridWeek')"
7272
:class="{ active: calendarView === 'timeGridWeek' }"
7373
>Week</b-button>
7474
<b-button
75-
variant="default" @click="changeView('timeGridDay')"
75+
variant="gray-default" @click="changeView('timeGridDay')"
7676
:class="{ active: calendarView === 'timeGridDay' }"
7777
>Day</b-button>
7878
</b-button-group>
@@ -200,7 +200,7 @@ export default {
200200
const d = date.getDate();
201201
const m = date.getMonth();
202202
const y = date.getFullYear();
203-
const {info, danger, primary, gray, success, textColor} = this.appConfig.colors;
203+
const {info, danger, primary, success, textColor, inverse, warning} = this.appConfig.colors;
204204
return {
205205
header: {
206206
left: '',
@@ -211,22 +211,22 @@ export default {
211211
{
212212
title: 'All Day Event',
213213
start: new Date(y, m, 1),
214-
backgroundColor: info,
214+
backgroundColor: primary,
215215
description: 'Will be busy throughout the whole day',
216216
},
217217
{
218218
title: 'Long Event',
219219
start: new Date(y, m, d + 5),
220220
end: new Date(y, m, d + 7),
221221
textColor: textColor,
222-
backgroundColor: gray,
222+
backgroundColor: primary,
223223
description: 'This conference should be worse visiting',
224224
},
225225
{
226226
id: 999,
227227
title: 'Blah Blah Car',
228228
start: new Date(y, m, d - 3, 16, 0),
229-
backgroundColor: gray,
229+
backgroundColor: warning,
230230
textColor: textColor,
231231
allDay: false,
232232
description: 'Agree with this guy on arrival time',
@@ -236,21 +236,21 @@ export default {
236236
title: 'Buy this template',
237237
start: new Date(y, m, d + 3, 12, 0),
238238
allDay: false,
239-
backgroundColor: primary,
239+
backgroundColor: success,
240240
description: 'Make sure everything is consistent first',
241241
},
242242
{
243243
title: 'Got to school',
244244
start: new Date(y, m, d + 16, 12, 0),
245245
end: new Date(y, m, d + 16, 13, 0),
246-
backgroundColor: success,
246+
backgroundColor: danger,
247247
description: 'Time to go back',
248248
},
249249
{
250250
title: 'Study some Node',
251251
start: new Date(y, m, d + 18, 12, 0),
252252
end: new Date(y, m, d + 18, 13, 0),
253-
backgroundColor: info,
253+
backgroundColor: inverse,
254254
description: 'Node.js is a platform built '
255255
+ 'on Chrome\'s JavaScript runtime for easily'
256256
+ ' building fast, scalable network applications.'
@@ -264,7 +264,7 @@ export default {
264264
start: new Date(y, m, 28),
265265
end: new Date(y, m, 29),
266266
url: 'http://flatlogic.com/',
267-
backgroundColor: danger,
267+
backgroundColor: info,
268268
description: 'Creative solutions',
269269
},
270270
],
@@ -283,4 +283,4 @@ export default {
283283
};
284284
</script>
285285

286-
<style src="./Calendar.scss" lang="scss" />
286+
<style src="./Calendar.scss" lang="scss" />

0 commit comments

Comments
 (0)