This is the 27th day of my participation in Gwen Challenge

Thanks to the 100 people who have been following this series of columns, it means that what I write is still worth something. Maybe with the end of this activity, I will not continue to record so frequently, but I will definitely continue to optimize and record this project.

The FullCalendar theme style is uniform

Continuing with yesterday’s code:

  setup() {
    const themeVars = ref(useThemeVars());
    return {
      themeVars,
    };
  },
  computed: {
    themeValue(): any {
      this.updateColors();
      return this.store.state.themeValue == 'darkTheme' ? darkTheme : null;
    },
  },
  methods: {
    updateColors() {
      this.calendarOptions.eventColor = this.themeVars.primaryColor;
    },
Copy the code

When we listen to the because of the change of the theme, cause useThemeVars () inside a custom color style changes, such as, in turn, give us calendarOptions. EventColor assignment again, So we can keep our eventColor and Naive UI in sync:

With the first color change in the FullCalendar, let’s go ahead and make a change to the rest.

Look at the difference between these two, found the next is the background color modification.

Use the NElement component

We take advantage of the Element component provided by Naive UI:

Layer NCard and NElement on top of the previous code:

// FullcalendarSub

<template>
  <n-config-provider :theme="themeValue">
    <n-card>
      <n-el
        style="color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"
      >
        <full-calendar
          ref="fullcalendar"
          :options="calendarOptions"
          style="color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"
        >
          <template #eventContent="arg">
            <i>{{ arg.event.title }}</i>
          </template>
        </full-calendar>
      </n-el>
    </n-card>
  </n-config-provider>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { darkTheme, NElement as NEl, useThemeVars, NConfigProvider } from 'naive-ui';
Copy the code

Var (–primary-color) : var(–primary-color)

After basically reaching the switch theme, the whole style is unified.

All that’s left is to rearrange the style and layout for an extra layer of NCard, and then fine-tune it.

summary

So far, the development of core functions, the setting of style theme and the deployment of Github Action for automatic packaging process have been basically completed.

The next step is to spend a lot of time in various details of the optimization, as well as the Logo design, the application SKetch design reconstruction.

To be continued!

The code has been synced to Github: github.com/fanly/fanly…