565 lines
No EOL
22 KiB
Vue
565 lines
No EOL
22 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Page Header -->
|
|
<PageHeader
|
|
title="Events"
|
|
subtitle="Join our community events, workshops, and gatherings designed to connect developers and share knowledge about cooperative game development."
|
|
theme="blue"
|
|
size="large"
|
|
/>
|
|
|
|
<!-- Event Calendar -->
|
|
<section class="py-20 bg-white dark:bg-gray-900">
|
|
<UContainer>
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
|
Event Calendar
|
|
</h2>
|
|
<div class="flex items-center justify-center gap-2 mb-8">
|
|
<div class="w-6 h-6 bg-blue-500 rounded-full" />
|
|
<div class="w-6 h-6 bg-blue-400 rounded-full" />
|
|
<div class="w-8 h-1 bg-blue-300 rounded-full" />
|
|
<div class="w-8 h-1 bg-blue-200 rounded-full" />
|
|
<div class="w-8 h-1 bg-blue-100 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700">
|
|
<ClientOnly>
|
|
<div v-if="pending" class="min-h-[400px] bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
|
<p class="text-gray-600 dark:text-gray-400">Loading events...</p>
|
|
</div>
|
|
</div>
|
|
<VueCal
|
|
v-else
|
|
:events="events"
|
|
:time="false"
|
|
active-view="month"
|
|
class="custom-calendar"
|
|
:disable-views="['years', 'year']"
|
|
:hide-weekends="false"
|
|
today-button
|
|
events-on-month-view="short"
|
|
:editable-events="{
|
|
title: false,
|
|
drag: false,
|
|
resize: false,
|
|
delete: false,
|
|
create: false
|
|
}"
|
|
@event-click="onEventClick"
|
|
/>
|
|
<template #fallback>
|
|
<div class="min-h-[400px] bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
|
|
<p class="text-gray-600 dark:text-gray-400">Loading calendar...</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</ClientOnly>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Event Series -->
|
|
<section v-if="activeSeries.length > 0" class="py-20 bg-purple-50 dark:bg-purple-900/20">
|
|
<UContainer>
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-8">
|
|
Active Event Series
|
|
</h2>
|
|
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
|
Multi-part workshops and recurring events designed to deepen your knowledge and build community connections.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
<div
|
|
v-for="series in activeSeries.slice(0, 6)"
|
|
:key="series.id"
|
|
class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700"
|
|
>
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div :class="[
|
|
'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
|
|
getSeriesTypeBadgeClass(series.type)
|
|
]">
|
|
{{ formatSeriesType(series.type) }}
|
|
</div>
|
|
<div class="flex items-center gap-1 text-xs text-gray-500">
|
|
<Icon name="heroicons:calendar-days" class="w-4 h-4" />
|
|
<span>{{ series.eventCount }} events</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
|
{{ series.title }}
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
|
|
{{ series.description }}
|
|
</p>
|
|
|
|
<div class="space-y-2 mb-4">
|
|
<div
|
|
v-for="event in series.events.slice(0, 3)"
|
|
:key="event.id"
|
|
class="flex items-center justify-between text-xs"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-medium">
|
|
{{ event.series?.position || '?' }}
|
|
</div>
|
|
<span class="text-gray-600 dark:text-gray-400 truncate">{{ event.title }}</span>
|
|
</div>
|
|
<span class="text-gray-500 dark:text-gray-500">
|
|
{{ formatEventDate(event.startDate) }}
|
|
</span>
|
|
</div>
|
|
<div v-if="series.events.length > 3" class="text-xs text-gray-500 dark:text-gray-500 text-center pt-1">
|
|
+{{ series.events.length - 3 }} more events
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="text-gray-500 dark:text-gray-500">
|
|
{{ formatDateRange(series.startDate, series.endDate) }}
|
|
</div>
|
|
<span :class="[
|
|
'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
|
|
series.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' :
|
|
series.status === 'upcoming' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
|
|
'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
|
|
]">
|
|
{{ series.status }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Upcoming Events -->
|
|
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<UContainer>
|
|
<div class="text-center mb-12">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
|
Upcoming Events
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
<NuxtLink
|
|
v-for="event in upcomingEvents"
|
|
:key="event.id"
|
|
:to="`/events/${event.slug || event.id}`"
|
|
class="group bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-all hover:shadow-xl"
|
|
>
|
|
<!-- Feature Image -->
|
|
<div v-if="event.featureImage?.url" class="aspect-video w-full overflow-hidden">
|
|
<img
|
|
:src="getImageUrl(event.featureImage)"
|
|
:alt="event.featureImage.alt || event.title"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
@error="handleImageError"
|
|
/>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<!-- Series Badge -->
|
|
<div v-if="event.series?.isSeriesEvent" class="mb-3">
|
|
<div class="inline-flex items-center gap-1 text-xs font-medium text-purple-600 dark:text-purple-400">
|
|
<div class="w-4 h-4 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-bold">
|
|
{{ event.series.position }}
|
|
</div>
|
|
<Icon name="heroicons:squares-2x2" class="w-3 h-3" />
|
|
{{ event.series.title }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div :class="[
|
|
'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
|
|
event.class === 'event-community' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
|
|
event.class === 'event-workshop' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' :
|
|
event.class === 'event-social' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' :
|
|
'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
|
|
]">
|
|
{{ event.class === 'event-community' ? 'Community' :
|
|
event.class === 'event-workshop' ? 'Workshop' :
|
|
event.class === 'event-social' ? 'Social' : 'Showcase' }}
|
|
</div>
|
|
<Icon v-if="event.membersOnly" name="heroicons:lock-closed" class="w-4 h-4 text-purple-500" />
|
|
</div>
|
|
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
|
{{ event.title }}
|
|
</h3>
|
|
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
{{ event.content }}
|
|
</p>
|
|
|
|
<div class="flex items-center text-sm text-gray-500 dark:text-gray-500">
|
|
<Icon name="heroicons:calendar" class="w-4 h-4 mr-1" />
|
|
{{ formatEventDate(event.start) }}
|
|
</div>
|
|
|
|
<div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
|
|
<span class="inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:translate-x-1 transition-transform">
|
|
View Details
|
|
<Icon name="heroicons:arrow-right" class="w-4 h-4 ml-1" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Attend Our Events -->
|
|
<section class="py-20 bg-white dark:bg-gray-900">
|
|
<UContainer>
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
|
Attend Our Events
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 mb-12">
|
|
<div class="space-y-6 mb-8">
|
|
<div class="h-2 bg-blue-500 rounded-full" />
|
|
<div class="h-2 bg-blue-400 rounded-full w-5/6" />
|
|
<div class="h-2 bg-blue-300 rounded-full w-2/3" />
|
|
</div>
|
|
|
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
|
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
|
Our events are designed to build community, share knowledge, and support developers exploring cooperative models. From informal networking sessions to structured workshops, there's something for everyone.
|
|
</p>
|
|
|
|
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
|
|
Regular events include monthly community meetups, quarterly workshops on cooperative business structures, and seasonal social gatherings. We also host special events featuring guest speakers and collaborative project showcases.
|
|
</p>
|
|
|
|
<p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
|
|
All events are welcoming to developers at any stage of their cooperative journey, from those just curious about alternative models to experienced co-op members sharing their insights.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<div class="w-8 h-8 bg-blue-500 rounded" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Monthly Meetups</h3>
|
|
<div class="space-y-1 mb-3">
|
|
<div class="h-1 bg-blue-500 rounded-full" />
|
|
<div class="h-1 bg-blue-300 rounded-full w-3/4 mx-auto" />
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Casual networking and knowledge sharing sessions
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<div class="w-8 h-8 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Workshops</h3>
|
|
<div class="space-y-1 mb-3">
|
|
<div class="h-1 bg-emerald-500 rounded-full" />
|
|
<div class="h-1 bg-emerald-300 rounded-full w-5/6 mx-auto" />
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Hands-on learning about cooperative business models
|
|
</p>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<div class="w-8 h-8 bg-purple-500 rounded-full" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Social Events</h3>
|
|
<div class="space-y-1 mb-3">
|
|
<div class="h-1 bg-purple-500 rounded-full" />
|
|
<div class="h-1 bg-purple-300 rounded-full w-2/3 mx-auto" />
|
|
</div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
Community building and celebration gatherings
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
<!-- Event Highlights -->
|
|
<section class="py-20 bg-gray-50 dark:bg-gray-800">
|
|
<UContainer>
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
|
|
Event Highlights
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
|
<div class="space-y-6">
|
|
<div class="space-y-4">
|
|
<div class="h-2 bg-blue-500 rounded-full" />
|
|
<div class="h-2 bg-blue-400 rounded-full w-5/6" />
|
|
<div class="h-2 bg-blue-300 rounded-full w-3/4" />
|
|
<div class="h-2 bg-blue-200 rounded-full w-1/2" />
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
|
|
Recent Highlights
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
|
|
Our latest workshop on "Building Sustainable Game Co-ops" brought together 50+ developers to explore practical strategies for transitioning to cooperative models.
|
|
</p>
|
|
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
The quarterly showcase featured three member studios presenting their games and sharing insights about democratic decision-making in creative projects.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
|
|
Upcoming Features
|
|
</h3>
|
|
<p class="text-gray-600 dark:text-gray-400 leading-relaxed">
|
|
Next month's event will include a panel discussion on funding cooperative studios, featuring successful co-op founders and supporting investors.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center">
|
|
<div class="w-full max-w-md h-64 bg-blue-100 dark:bg-blue-900/30 rounded-2xl border-2 border-dashed border-blue-300 dark:border-blue-700 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-blue-200 dark:bg-blue-800 rounded-xl flex items-center justify-center mx-auto mb-4">
|
|
<div class="w-8 h-8 bg-blue-500 rounded" />
|
|
</div>
|
|
<p class="text-blue-600 dark:text-blue-400 font-medium">Event Photos</p>
|
|
<p class="text-sm text-blue-500 dark:text-blue-500 mt-2">Coming Soon</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UContainer>
|
|
</section>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { VueCal } from 'vue-cal'
|
|
import 'vue-cal/style.css'
|
|
|
|
// Fetch events from API
|
|
const { data: eventsData, pending, error } = await useFetch('/api/events')
|
|
// Fetch series from API
|
|
const { data: seriesData } = await useFetch('/api/series')
|
|
|
|
// Transform events for calendar display
|
|
const events = computed(() => {
|
|
if (!eventsData.value) return []
|
|
|
|
return eventsData.value.map(event => ({
|
|
id: event.id || event._id,
|
|
slug: event.slug,
|
|
start: new Date(event.startDate),
|
|
end: new Date(event.endDate),
|
|
title: event.title,
|
|
content: event.description,
|
|
class: `event-${event.eventType}`,
|
|
membersOnly: event.membersOnly,
|
|
eventType: event.eventType,
|
|
location: event.location,
|
|
registeredCount: event.registeredCount,
|
|
maxAttendees: event.maxAttendees,
|
|
featureImage: event.featureImage,
|
|
series: event.series
|
|
}))
|
|
})
|
|
|
|
// Get active event series
|
|
const activeSeries = computed(() => {
|
|
if (!seriesData.value) return []
|
|
return seriesData.value.filter(series =>
|
|
series.status === 'active' || series.isOngoing || series.isUpcoming
|
|
)
|
|
})
|
|
|
|
// Get upcoming events (future events)
|
|
const upcomingEvents = computed(() => {
|
|
const now = new Date()
|
|
return events.value
|
|
.filter(event => event.start > now)
|
|
.sort((a, b) => a.start - b.start)
|
|
.slice(0, 6) // Show max 6 upcoming events
|
|
})
|
|
|
|
// Format event date for display
|
|
const formatEventDate = (date) => {
|
|
return new Intl.DateTimeFormat('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
}).format(date)
|
|
}
|
|
|
|
// Get optimized Cloudinary image URL
|
|
const getOptimizedImageUrl = (publicId, transformations) => {
|
|
if (!publicId) return ''
|
|
|
|
const config = useRuntimeConfig()
|
|
return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
|
|
}
|
|
|
|
// Get image URL with fallback logic
|
|
const getImageUrl = (featureImage) => {
|
|
if (!featureImage) return ''
|
|
|
|
// If we have a direct URL, use it as primary (since seed data uses external URLs)
|
|
if (featureImage.url) {
|
|
return featureImage.url
|
|
}
|
|
|
|
// Fallback to Cloudinary if we have a publicId
|
|
if (featureImage.publicId) {
|
|
return getOptimizedImageUrl(featureImage.publicId, 'w_400,h_200,c_fill')
|
|
}
|
|
|
|
return ''
|
|
}
|
|
|
|
// Handle image loading errors
|
|
const handleImageError = (event) => {
|
|
console.warn('Image failed to load:', event.target.src)
|
|
// Optionally hide the image container or show a placeholder
|
|
}
|
|
|
|
// Handle calendar event click
|
|
const onEventClick = (event) => {
|
|
if (event.id) {
|
|
navigateTo(`/events/${event.slug || event.id}`)
|
|
}
|
|
}
|
|
|
|
// Series helper functions
|
|
const formatSeriesType = (type) => {
|
|
const types = {
|
|
'workshop_series': 'Workshop Series',
|
|
'recurring_meetup': 'Recurring Meetup',
|
|
'multi_day': 'Multi-Day Event',
|
|
'course': 'Course',
|
|
'tournament': 'Tournament'
|
|
}
|
|
return types[type] || type
|
|
}
|
|
|
|
const getSeriesTypeBadgeClass = (type) => {
|
|
const classes = {
|
|
'workshop_series': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
|
|
'recurring_meetup': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
|
|
'multi_day': 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
|
|
'course': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
|
|
'tournament': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
|
|
}
|
|
return classes[type] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
|
|
}
|
|
|
|
const formatDateRange = (startDate, endDate) => {
|
|
if (!startDate || !endDate) return 'No dates'
|
|
|
|
const start = new Date(startDate)
|
|
const end = new Date(endDate)
|
|
|
|
const startMonth = start.toLocaleDateString('en-US', { month: 'short' })
|
|
const endMonth = end.toLocaleDateString('en-US', { month: 'short' })
|
|
const startDay = start.getDate()
|
|
const endDay = end.getDate()
|
|
const year = end.getFullYear()
|
|
|
|
if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {
|
|
return `${startMonth} ${startDay}-${endDay}, ${year}`
|
|
} else if (start.getFullYear() === end.getFullYear()) {
|
|
return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`
|
|
} else {
|
|
return `${formatEventDate(startDate)} - ${formatEventDate(endDate)}`
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Custom calendar styling to match the site theme */
|
|
.custom-calendar {
|
|
--vuecal-primary-color: #3b82f6;
|
|
--vuecal-text-color: #374151;
|
|
--vuecal-border-color: #e5e7eb;
|
|
--vuecal-header-color: #f9fafb;
|
|
--vuecal-today-color: #dbeafe;
|
|
}
|
|
|
|
.dark .custom-calendar {
|
|
--vuecal-primary-color: #60a5fa;
|
|
--vuecal-text-color: #d1d5db;
|
|
--vuecal-border-color: #4b5563;
|
|
--vuecal-header-color: #374151;
|
|
--vuecal-today-color: #1e3a8a;
|
|
}
|
|
|
|
/* Event type styling */
|
|
.vuecal__event.event-community {
|
|
background-color: #3b82f6;
|
|
border-color: #2563eb;
|
|
}
|
|
|
|
.vuecal__event.event-workshop {
|
|
background-color: #10b981;
|
|
border-color: #059669;
|
|
}
|
|
|
|
.vuecal__event.event-social {
|
|
background-color: #8b5cf6;
|
|
border-color: #7c3aed;
|
|
}
|
|
|
|
.vuecal__event.event-showcase {
|
|
background-color: #f59e0b;
|
|
border-color: #d97706;
|
|
}
|
|
|
|
/* Responsive calendar */
|
|
.vuecal {
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vuecal__header {
|
|
background-color: var(--vuecal-header-color);
|
|
color: var(--vuecal-text-color);
|
|
}
|
|
|
|
.vuecal__title {
|
|
color: var(--vuecal-primary-color);
|
|
font-weight: 600;
|
|
}
|
|
</style> |