<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
/* Add your styles here */
(function()
{
require.config(
{
baseUrl: "js/",
paths:{
vue: "https://rawgit.com/edgardleal/require-vuejs/master/dist/require-vuejs",
VueRouter: "https://unpkg.com/vue-router/dist/vue-router"//"https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min"
}
});
require(["router/router", "vue!App"], function(router, App)
{
//Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router: router,
render: h => h(App)
})
});
})();
<template>
<v-container
fluid
grid-list-lg
class="mt-0"
>
<v-layout row wrap>
<v-flex xs12>
<v-card tile>
<v-carousel hide-delimiters class="mycarousel">
<v-carousel-item dark v-for="item in list" :key="item.id" :src="item.imageURL">
<div class="white--text text-xs-center">
<h3 class="headline">{{ item.title }}</h3>
<div class="subheading">
<v-icon dark>location_on</v-icon> {{ item.location }}
</div>
<div class=""title>
{{ item.date }} {{ item.hour }}
</div>
</div>
</v-carousel-item>
</v-carousel>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
define([], function()
{
return Vue.extend({
template,
data:() => ({
list: [
{
id: 1,
title: "Ceremony at Monkey Forest",
location: "Alas Kedaton, Tabanan",
date: "18 Mar 2018",
hour: "14:00 PM",
joined: 32,
imageURL: "https://c2.staticflickr.com/8/7390/11206634984_44f61f926d.jpg"
},
{
id: 2,
title: "Pandanus War",
location: "Tenganan Pegeringsingan, Karangasem",
date: "20 Jul 2018",
hour: "10:00 AM",
joined: 40,
imageURL: "https://c2.staticflickr.com/6/5331/17634071142_152c806768.jpg",
},
{
id: 3,
title: "Bali Mass Cremation",
location: "Tampaksiring, Gianyar",
date: "6 Aug 2018",
hour: "09:00 AM",
joined: 10,
imageURL: "https://c1.staticflickr.com/9/8713/17470094589_0f1fd7c67f.jpg"
},
{
id: 4,
title: "Makepung Lampit",
location: "Yeh Peh, Jembrana",
date: "18 Nov 2018",
hour: "07:00 AM",
joined: 24,
imageURL: "https://c1.staticflickr.com/9/8117/8678393979_1997fecfe8.jpg"
}
]
})
});
});
</script>
<template>
<v-container
fluid
grid-list-lg
class="mt-0"
>
<v-layout row wrap>
<v-flex xs12 md6 v-for="item in list" :key="item.id">
<v-card tile>
<v-card-media
class="white--text"
:src="item.imageURL"
height="200px">
<v-container fluid class="mb-0 pl-2 pb-2">
<v-layout>
<v-flex xs12>
<v-icon x-large dark>event</v-icon>
<span class="subheading">{{ item.date }} {{ item.hour }}</span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline">{{ item.title }}</h3>
<div class="subheading pl-0">
<v-icon>location_on</v-icon> {{ item.location }}
</div>
<v-flex xs12 class="grey--text text--darken-1 pl-0">
<v-icon class="grey--text text--lighten-1">supervisor_account</v-icon>
<span class="body-1"> {{ item.joined }} People Joined</span>
</v-flex>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat
:to="
{
name:'CalendarDetail',
params:
{
id:item.id,
item:item
}
}"
>
View Detail
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
define([], function()
{
return Vue.extend({
template,
data:() => ({
list: [
{
id: 1,
title: "Ceremony at Monkey Forest",
location: "Alas Kedaton, Tabanan",
date: "18 Mar 2018",
hour: "14:00 PM",
joined: 32,
imageURL: "https://c2.staticflickr.com/8/7390/11206634984_44f61f926d.jpg",
desc: "The temple ceremony in Alas Kedaton Temple is carried out every 210 days a year. It is on <i>Anggarakasih Medangsia</i> (Balinese Hindu calendar) or on every Tuesday where on that time the society do the worship or pray to request the safety and prosperity. The unique in this ceremony is do not use the fire and do not hence Penjor and also finished before the sunset or before the night is come."
},
{
id: 2,
title: "Pandanus War",
location: "Tenganan Pegeringsingan, Karangasem",
date: "20 Jul 2018",
hour: "10:00 AM",
joined: 40,
imageURL: "https://c2.staticflickr.com/6/5331/17634071142_152c806768.jpg",
desc: "Pandanus War or localy known as <i>Mekare-kare</i> is an annual theatrical fight between the young men of the village, utilising prickly pandanus leaf whips! Each dual is staged to the intense martial sounds of <i>gamelan selonding</i> music, and lasts only a few seconds, accompanied by much merriment and laughter."
},
{
id: 3,
title: "Bali Mass Cremation",
location: "Tampaksiring, Gianyar",
date: "6 Aug 2018",
hour: "09:00 AM",
joined: 10,
imageURL: "https://c1.staticflickr.com/9/8713/17470094589_0f1fd7c67f.jpg",
desc: "Cremation is guiding the soul of the deceased family member from hell and underworld to divine realms, later to be reborn in the next generation of the same family. Long preparations proceed cremation ceremonies.<br>Each family uses a certain type of sarcophagus, sculptures formed as mythical animals, according to their cast. A black or white bull is used for a Brahman cast, together with a tower-shaped sarcophage called bade, with roofs like a pagode."
},
{
id: 4,
title: "Makepung Lampit",
location: "Yeh Peh, Jembrana",
date: "18 Nov 2018",
hour: "07:00 AM",
joined: 24,
imageURL: "https://c1.staticflickr.com/9/8117/8678393979_1997fecfe8.jpg",
desc: "Makepung Lampit is a kind of buffalo race without using the wheel as often held now in Jembrana district of Bali, but using the thing called <i>Lampit</i>. Lampit is a tool to flatten rice fields before planting. <br>Makepung Lampit have started to be implemented since the 1940 and stopped around 1990 after the available machines such as tractors to plow rice fields."
}
]
})/*,
mounted(){
console.log(this.$route);
}*/
});
});
</script>
<style>
.joined {
/*color: red;*/
}
</style>
<template>
<v-container class="mt-0">
{{ title }}
</v-container>
</template>
<script>
define([], function()
{
return Vue.extend({
template,
data:() => ({
title: "Profile Info"
})
});
});
</script>
<template>
<v-container
fluid
grid-list-lg
class="mt-0"
>
<v-layout row wrap>
<v-flex xs12>
<v-card tile>
<!--v-card-media :src="item.imageURL" contain>
</v-card-media-->
<v-carousel hide-delimiters class="mycarousel">
<v-carousel-item :src="item.imageURL"></v-carousel-item>
</v-carousel>
<v-card-title primary-title>
<div>
<h3 class="headline">{{ item.title }}</h3>
<div class="subheading pl-0">
<v-icon>location_on</v-icon> {{ item.location }}
</div>
<v-flex xs12 class="pl-0">
<v-icon>event</v-icon>
<span class="body-1">{{ item.date }} {{ item.hour }}</span>
</v-flex>
<v-flex xs12 class="grey--text text--darken-1 pl-0">
<v-icon class="grey--text text--lighten-1">supervisor_account</v-icon>
<span class="body-1"> {{ item.joined }} People Joined</span>
</v-flex>
<div v-if="item.desc" v-html="item.desc"></div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat>Share</v-btn>
<v-btn flat to="/calendar">Close</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
define([], function()
{
return Vue.extend({
template,
props: ["id", "item"]
/*data:() => (){
})*/
});
});
</script>
<style>
@media only screen and (max-width: 320px) {
.mycarousel {
height:100px;
}
}
@media only screen and (max-width: 600px) {
.mycarousel {
height:250px;
}
}
@media only screen and (max-width: 961px) {
.mycarousel {
height:350px;
}
}
</style>
<template>
<v-container class="ma-0 pa-10">
<v-alert color="warning" icon="info" value="true">
Today is the last opportunity to join Pandanus War
</v-alert>
<v-alert color="error" icon="warning" value="true">
Sorry you've missed Barong Brutuk Sacred Dance yesterday
</v-alert>
<v-alert color="success" icon="check_circle" value="true">
You joined Ceremony at Monkey Forest yesterday.
</v-alert>
<v-alert color="info" icon="info" value="true">
Congrats...!! You registered Photo Hunt Calendar a year ago
</v-alert>
</v-container>
</template>
<script>
define([], function(){
return Vue.extend({
template
});
});
</script>
<template>
</template>
<script>
define([], function()
{
return Vue.extend({
template
});
});
</script>
<template>
<v-app>
<v-navigation-drawer
absolute
class="hidden-sm-and-up"
v-model="sideNav">
<v-toolbar flat>
<v-list>
<v-list-tile>
<v-list-tile-title class="title">
{{ appName }}
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-list>
<v-list-tile
v-for="item in menuItems"
:key="item.title"
:to="item.link"
>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-badge color="red" v-if="item.badge">
<span slot="badge">{{ item.badge }}</span>
<span>{{ item.title }}</span>
</v-badge>
<v-list-tile-content v-else>{{ item.title }}</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar>
<v-toolbar-side-icon
@click.stop="sideNav = !sideNav"
class="hidden-sm-and-up"></v-toolbar-side-icon>
<v-toolbar-title>
<router-link
to="/"
tag="span"
style="cursor: pointer"
>
{{ appName }}
</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat
v-for="item in menuItems"
:key="item.title"
:to="item.link"
>
<v-icon left>{{ item.icon }}</v-icon>
<v-badge color="red" v-if="item.badge">
<span slot="badge">{{ item.badge }}</span>
<span>{{ item.title }}</span>
</v-badge>
<span v-else>{{ item.title }}</span>
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
<router-view></router-view>
</main>
</v-app>
</template>
<script>
define([], function()
{
return Vue.extend(
{
template: template,
data: function() {
return {
sideNav: false,
appName: "Photo Hunt Calendar",
menuItems: [
{icon: 'date_range', title: 'Event Calendar', link: '/calendar'},
//{icon: 'person', title: 'Profile', link: '/profile'},
{icon: 'notifications', title: 'Notifications', badge:4, link: '/notification'}
]
}
}
});
});
</script>
define(["VueRouter",
"vue!components/Home",
"vue!components/Calendar",
"vue!components/CalendarDetail",
"vue!components/Profile",
"vue!components/Notification"
],
function(VueRouter,
Home,
Calendar,
CalendarDetail,
Profile,
Notification
)
{
Vue.use(VueRouter);
return new VueRouter({
routes: [
{
path: "/calendar",
name: "Calendar",
component:Calendar
},
{
path: "/calendar/:id",
name: "CalendarDetail",
component:CalendarDetail,
props: true
},
{
path: "/profile",
name: "Profile",
component:Profile
},
{
path: "/notification",
name: "Notification",
component:Notification
},
{
path: "/",
name: "Home",
component:Home
}
],
//mode: 'history'
});
});
# Vue Router + Vuetify JS Example
Event Calendar Demo using Vue Router and Vuetify JS
# Library
VueJS
VueRouter
VuetifyJS
Material Design