uni-app插入日历活动

在uni-app中插入日历活动，你可以使用<calendar>组件来展示日历，并结合自定义的模态框或弹窗来添加活动。以下是一个简单的示例代码，展示如何实现这一功能。

首先，在你的pages目录下创建一个新的页面，比如calendar.vue，然后编写以下代码：

<template>
  <view>
    <calendar
      :current="{{current}}"
      @select="{{handleSelect}}"
      range="{{'2023-01-01', '2023-12-31'}}"
      :marks="{{marks}}"
    />
    <modal v-if="showModal" @confirm="confirmAddEvent" @cancel="cancelAddEvent">
      <view class="modal-content">
        <input v-model="eventTitle" placeholder="请输入活动标题" />
        <input v-model="eventDate" type="date" placeholder="请选择活动日期" />
        <textarea v-model="eventDesc" placeholder="请输入活动描述"></textarea>
      </view>
      <view class="modal-footer">
        <button @click="cancelAddEvent">取消</button>
        <button type="primary" @click="confirmAddEvent">确定</button>
      </view>
    </modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: new Date(),
      showModal: false,
      marks: [],
      eventTitle: '',
      eventDate: '',
      eventDesc: ''
    };
  },
  methods: {
    handleSelect(e) {
      this.showModal = true;
      this.eventDate = e.detail.date;
    },
    confirmAddEvent() {
      if (this.eventTitle && this.eventDate) {
        this.marks.push({
          date: this.eventDate,
          text: this.eventTitle
        });
        this.showModal = false;
        this.eventTitle = '';
        this.eventDate = '';
        this.eventDesc = '';
      } else {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
      }
    },
    cancelAddEvent() {
      this.showModal = false;
      this.eventTitle = '';
      this.eventDate = '';
      this.eventDesc = '';
    }
  }
};
</script>

<style>
/* 添加你的样式 */
</style>

在这个示例中，<calendar>组件用于显示日历，当用户选择一个日期时，会触发handleSelect方法，显示模态框让用户输入活动信息。用户点击“确定”后，活动信息会被添加到marks数组中，并在日历上标记出来。

注意，uni-app的<calendar>组件可能不支持直接添加活动详情（如描述），所以这里使用marks属性仅标记日期和标题。如果需要更复杂的日历功能，可能需要考虑使用第三方库或自定义组件。

确保你已经在项目中正确配置了uni-app和相关依赖，并根据需要调整代码以适应你的具体需求。