Nuxt Calendar provides several composables to help you manage calendar logic, internationalization, and data synchronization without being tied to the UI.
useCalendarI18nManage dates, times, and timezones in a consistent way.
<script setup lang="ts">
const { formatDate, toLocalTimezone, timezone, locale } = useCalendarI18n()
// Format a date using the configured locale and timezone
const displayDate = formatDate(new Date(), 'PPPP')
// Convert a UTC date to the configured timezone
const localDate = toLocalTimezone(new Date())
</script>
useNuxtCalendarConfigAccess the global module configuration anywhere in your application.
<script setup lang="ts">
const config = useNuxtCalendarConfig()
console.log(config.timeFormat) // '24h' or '12h'
console.log(config.i18n.weekStartsOn) // 1 (Monday)
</script>
useCalendarIcsPro Feature: Requires a NuxtCalendar Pro license. See ICS Integration for more details.
Generate and export calendar events to the standard ICS format.
<script setup lang="ts">
const { exportToIcs } = useCalendarIcs()
async function downloadCalendar() {
const { success, error } = await exportToIcs(events.value, 'my-schedule.ics')
if (!success) {
console.error('Export failed:', error)
}
}
</script>
useCalendarDatabasePro Feature: Requires a NuxtCalendar Pro license. See Database Sync for more details.
Sync your calendar events with a PostgreSQL database via NuxtHub.
<script setup lang="ts">
const { fetchEvents, createEvent, updateEvent, deleteEvent } = useCalendarDatabase()
// Fetch all events
const { events, success } = await fetchEvents()
// Create a new event
await createEvent({
title: 'New Meeting',
start: new Date(),
end: new Date(Date.now() + 3600000)
})
</script>
useCalendarSlotHeightCalculate event positions and heights based on the calendar grid configuration.
<script setup lang="ts">
const { hourHeight, getEventTop, getEventHeight } = useCalendarSlotHeight()
// Get the pixel offset from the top for a specific time
const top = getEventTop(new Date('2024-01-01T10:00:00'))
// Get the pixel height for an event duration
const height = getEventHeight(new Date('2024-01-01T10:00:00'), new Date('2024-01-01T11:00:00'))
</script>