vuejs,

Membuat Aplikasi Kalender dengan Vue.js

Ham Ham Follow Apr 23, 2020 · 1 min read
Membuat Aplikasi Kalender dengan Vue.js
Share this

Dengan Vue.js kita bisa membuat aplikasi kalender sederhana namun memiliki fitur lengkap, responsif, ringan di browser. Aplikasi ini sudah tersedia di npm sehingga kita lebih mudah melakukan instalasinya.

Pertama install melalui npm

npm install kalendar-vue -S

Import plugin kedalam komponen

import { Kalendar } from 'kalendar-vue';
import 'kalendar-vue/dist/KalendarVue.css';
...
components: {
	Kalendar,
	...
},

Lakukan beberapa konfigurasi pada file serve-dev.vue

...
calendar_settings: {
            style: 'material_design', // ['flat_design', 'material_design']
            view_type: 'Month', // ['Month', 'Day']
            split_value: 20, // Value % 60 === 0
            cell_height: 20, // !isNaN(Value)
            scrollToNow: true, // Boolean
            current_day: new Date(), // Valid date
            military_time: true, // Boolean
        },
...

Untuk source code lengkap silahkan cek di GitHub

Dapatkan Update
Dapatkan update artikel dengan mudah, cukup masukkan emailmu aja!
Ham
Ham Follow
Hi, saya Ham, semoga artikel yang saya bagikan bermanfaat