ColorTimetable

The colortimetable component is a visual course timetable component designed for uni-app projects. It provides features such as:

• Visual weekly selection.
• Course management (deletion and pinning).
• Course detail cards.

Technical stack:

• Vue 3 with <script setup> syntax.
• Vite 2.
• TypeScript for type checking.
• Optimized with pnpm and ESBuild.

To use this component in a development environment, follow these steps to clone the repository, install dependencies, and run the project for WeChat Mini Program (mp-weixin).

Note: Ensure your uni-app project supports Vue 3.0 before proceeding.

# Clone the repository
git clone https://github.com/zguolee/ColorTimetable.git

# Install dependencies
cd ColorTimetable
pnpm install

# Run for WeChat Mini Program
pnpm run dev:mp-weixin

# Build for WeChat Mini Program
pnpm run build:mp-weixin

When upgrading to version 2.1.0, be aware of the following breaking changes:

• Course Data Structure: The internal structure of course data has changed. You must update your data models to match the new schema.
• Course Card Display: The method used to display course cards has been updated.

To identify if multiple courses are scheduled at the same time and day, use getConflictCourse or hasConflictCourseByMap.

• getConflictCourse(courseItem: CourseModel): Returns an array of CourseModel objects that overlap with the provided courseItem in the current week.
• hasConflictCourseByMap(courseItem: CourseModel): A performance-optimized version that uses an internal cache to return conflicting courses.

const courseStore = useCourseStore()
const myCourse = { title: 'Math', week: 1, start: 1, ... }

const conflicts = courseStore.getConflictCourse(myCourse)
if (conflicts.length > 0) {
  console.log('Time conflict detected!')
}

When using the UToast component, you can pass an options object of type UToastOptions to control the toast's appearance and behavior.

Supported options:

• type: The visual style of the toast. Use one of the following values: 'default', 'success', 'error', 'warning', or 'primary'.
• message: The string content to be displayed in the toast (required).
• duration: The time in milliseconds before the toast automatically disappears.

const options: UToastOptions = {
  type: 'success',
  message: 'Operation completed successfully!',
  duration: 3000
};

If you need to access the course store outside of a Vue component setup (e.g., in a plain TypeScript file or a utility function where Pinia context is not automatically available), use useCourseStoreWidthOut to ensure the store is correctly linked to the Pinia instance.

import { useCourseStoreWidthOut } from '~/stores/course'

const courseStore = useCourseStoreWidthOut()
// Now you can use courseStore as usual

The usePageStore provides proxy methods to trigger UI notifications and toasts. These methods rely on internal references (notifyRef and toastRef) that must be initialized (typically by the page component rendering the corresponding UnoUI components).

• showNotify(options: UNotifyOptions): Triggers a notification using the options provided.
• showToast(options: UToastOptions): Triggers a toast using the options provided.

import { usePageStore } from '~/stores/page'

const pageStore = usePageStore()

// Trigger a notification
pageStore.showNotify({
  // ... UNotifyOptions
})

// Trigger a toast
pageStore.showToast({
  // ... UToastOptions
})

The createApp function is the primary entrypoint for initializing the application. It creates a Vue SSR (Server-Side Rendering) application instance using createSSRApp and configures the necessary modules, such as Pinia for state management. This function returns an object containing the initialized app instance.

import { createApp } from './src/main'

const { app } = createApp()
// Use the app instance for further configuration or mounting

If you need to access the page store in a context where the standard usePageStore() (which relies on the current component instance) is unavailable (e.g., in a plain TypeScript file or a router guard), use usePageStoreWidthOut() to ensure the store is correctly linked to the global Pinia instance.

import { usePageStoreWidthOut } from '~/stores/page'

// Use this in non-component contexts
const pageStore = usePageStoreWidthOut()

pageStore.setPageConfig({ pageTitle: 'Global Context' })