日历面板

代码事例

<template>
  <div>
    {{ pickerValue }}
    <fk-date-picker
      v-model="pickerValue"
      class="date-panel"
      hide-trigger
      @panelChange="onPanelChange"
    >
      <template #cell="{ date }">
        <div class="cell-item">
          <div class="cell-date">{{ date.getDate() }}</div>
          <RenderFunction :render-func="renderCell" :date="date"/>
        </div>
      </template>
      <template #week-cell="params">
        <RenderFunction :render-func="renderWeekCell" v-bind="params"/>
      </template>
    </fk-date-picker>
  </div>
</template>
<script lang="tsx" setup>
import { ref } from 'vue';
import { RenderFunction, dayjs } from '@erp/common';

const pickerValue = ref();

const calendar = {
  '20251124': {
    tags: [
      {
        type: 'finished',
        color: '#00b42a',
        label: '已完成'
      }
    ]
  },
  '20251122': {
    tags: [
      {
        type: 'finished',
        color: '#00b42a',
        label: '已完成'
      }, {
        type: 'canceled',
        label: '已取消',
        color: '#ff7d00',
      }
    ]
  },
  '20251111': {
    tags: [
      {
        type: 'finished',
        color: '#00b42a',
        label: '已完成'
      }, {
        type: 'canceled',
        label: '已取消',
        color: '#ff7d00',
      }
    ]
  }
}

const renderCell = ({date}) => {
  const tags = [
    {
      type: 'finished',
      color: '#00b42a',
      label: '已完成'
    }, {
      type: 'canceled',
      label: '已取消',
      color: '#ff7d00',
    }
  ].slice(0, Math.floor(Math.random() * 3));
  return tags.map(v => {
    return <fk-tag size="mini" color={v.color}>{v.label}</fk-tag>
  });

  // const key = dayjs(date).format('YYYYMMDD');
  // const value = calendar[key];
  // if (value) {
  //   return value.tags.map(v => {
  //     return <fk-tag size="mini" color={v.color}>{v.label}</fk-tag>
  //   })
  // } else {
  //   return null;
  // }
}

const renderWeekCell = ({value, index}) => {
  return `周${value}`;
}

const onPanelChange = (rows) => {
  console.log('onPanelChange', rows);
}

</script>
<style lang="less">
.date-panel {
  .fk-picker-header {
    display: none;
  }
  .fk-picker-body {
    padding: 0;
  }
  .fk-picker-week-list {
    padding: 0;
  }
  .fk-picker-row {
    padding: 0;
  }
  .fk-picker-week-list-item {
    width: 80px;
    border-right: 1px solid var(--color-border-1);
  }
  .fk-picker-cell {
    width: 80px;
    height: 90px;
    color: var(--color-text-4);
    border-top: 1px solid var(--color-border-1);
    border-right: 1px solid var(--color-border-1);
    cursor: pointer;
    position: relative;
    padding: 8px;
    

    &.fk-picker-cell-in-view {
      color: var(--color-text-1);
      
      .cell-item {
        opacity: 1;
      }
    }
    &:hover {
      background: var(--color-primary-light-1);
    }
    .fk-tag {
      width: 100%;
      height: 16px;
      font-size: 10px;
      line-height: 12px;
    }
    .cell-item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      opacity: 0.4;
    }
    .cell-date {
      position: absolute;
      left: 6px;
      top: 6px;
      font-weight: bold;
    }
  }
  .fk-picker-cell-selected {
    background: var(--color-primary-light-1);
  }
  .fk-picker-cell-today {
    &::after {
      top: 6px;
      right: 6px;
      left: unset;
      bottom: unset;
      width: 8px;
      height: 8px;
    }
  }
}
</style>