js日历农历

Vue月球全日历 (vue-lunar-full-calendar)

Chinese lunar calendar for Fullcalendar.

Fullcalendar的中国农历。

图片和演示 (Image and demo)

a vue component for lunar fullcalendar. Uses Moment.js for date operations.
Increase the functions of Chinese lunar calendar, 24 solar terms and holidays

安装 (Installation)

npm install --save vue-lunar-full-calendar

//main.js
import LunarFullCalendar from "vue-lunar-full-calendar";
Vue.use(LunarFullCalendar);

But you can also import the standalone component to add locally or for more complex installations.

但是，您也可以导入独立组件以在本地添加或用于更复杂的安装。

// index.vue
import { LunarFullCalendar } from "vue-lunar-full-calendar";
export default {components: {LunarFullCalendar}
};

重要功能 (Important function)

1、window.lunar(date)

1，window.lunar(日期)

Use vue-lunar-full-calendar , You can use one function to get the date of a certain day.

使用vue-lunar-full-calendar，您可以使用一个功能来获取特定日期的日期。

2、lunarCalendar (default: true)

2，lunarCalendar(默认：true)

You can pass any custom options through to fullcalendar by using the config prop. Control whether the Chinese calendar shows true.

您可以使用config属性将任何自定义选项传递给fullcalendar。 控制中文日历是否显示为真。

<lunar-full-calendar :events="events" :config="config"></lunar-full-calendar>
...
<script>...data() {return {events: [],config: {lunarCalendar: true   //(Control whether the Chinese calendar shows true, unrealistic flase, default true.)},}},...window.lunar(date)   // Date is the date....
</script>

API文件 (API document)

Fullcalendar 文档(Fullcalendar docs)

Fullcalendar文档(Fullcalendar docs)

示例应用 (Example App)

I have created a simple Vue 2 webpack application as an example/playground https://github.com/hjdev/vue-lunar-fullcalendar

我已经创建了一个简单的Vue 2 Webpack应用程序作为示例/操场https://github.com/hjdev/vue-lunar-fullcalendar

基本用法 (Basic Usage)

You can pass an array of fullclendar objects through the props

您可以通过道具传递全月球对象数组

<lunar-full-calendar :events="events"></lunar-full-calendar> ...
<script>...data() {return {events: [{title  : 'event1',start  : '2018-01-01',},{title  : 'event2',start  : '2018-01-05',end    : '2018-01-07',},{title  : 'event3',start  : '2018-01-09T12:30:00',allDay : false,},]}}...
</script>

More event options can be found at http://fullcalendar.io/docs/event_data/Event_Object/

可以在http://fullcalendar.io/docs/event_data/Event_Object/中找到更多事件选项

使用JSON Feed (Using a JSON Feed)

<lunar-full-calendar :event-sources="eventSources"></lunar-full-calendar> ...
<script>...data() {return {eventSources: [{events(start, end, timezone, callback) {self.$http.get(`/myFeed`, {timezone: timezone}).then(response => {callback(response.data.data)})},color: 'yellow',textColor: 'black',},{events(start, end, timezone, callback) {self.$http.get(`/anotherFeed`, {timezone: self.timezone}).then(response => {callback(response.data.data)})},color: 'red',},]}}...
</script>

自定义配置 (Custom Config)

You can pass any custom options through to fullcalendar by using the config prop, this includes extra event handlers.

您可以使用config属性将任何自定义选项传递给fullcalendar，其中包括额外的事件处理程序。

<lunar-full-calendar :events="events" :config="config" /> ...
<script>...data() {return {events: [],config: {weekends: false,drop(...args) {//handle drop logic in parent},},}},...
</script>

进一步的道具 (Further Props)

You can edit the look and feel of fullcalendar by passing through extra props. These all have sensible defaults

您可以通过传递其他道具来编辑全日历的外观。 这些都有合理的默认值

• header - [obj] - docs

  标头 -[obj]- 文档

• defaultView - ['agendaWeek'] - docs

  defaultView -['agendaWeek']- 文档

• editable - [true] - docs

  可编辑 -[true]- 文档

• selectable - [true] - docs

  可选 -[true]- 文档

• selectHelper - [true] - docs

  selectHelper- [true]- 文档

• config - [true] - Pass your own custom config straight through to fullcalendar

  配置 - [真] -通过自己的自定义直通到fullcalendar配置

方法 (Methods)

Sometimes you may need to manipulate the Calendar from your parent component, you can use fireMethod for this. This works with anything in the Fullcalendar docs suffixed with (method) and it will dynamically handle as many arguments as needed.

有时您可能需要从父组件中操作Calendar，可以为此使用fireMethod 。 此方法适用于后缀为(method)的Fullcalendar文档中的任何内容，并将根据需要动态处理任意数量的参数。

<lunar-full-calendar :events="events" ref="calendar" /> ...
<script>...data() {return {events: [],}},methods: {next() {this.$refs.calendar.fireMethod('next')},changeView(view) {this.$refs.calendar.fireMethod('changeView', view)},},...
</script>

事件和挂钩 (Events and Hooks)

发射 (Emitted)

• event-selected(event, jsEvent, view) - Triggered on eventClick()

  event-selected(event，jsEvent，view) -在eventClick()上触发

• event-drop(event) - Triggered on eventDrop()

  event-drop(event) -在eventDrop()上触发

• event-resize(event) - Triggered on eventResize()

  event-resize(event) -在eventResize()上触发

• event-created(event) - Triggered on select()

  event-created(event) -在select()上触发

• event-receive(event) - Triggered on eventReceive()

  event-receive(event) -在eventReceive()上触发

• event-render(event) - Triggered on eventRender()

  event-render(event) -在eventRender()上触发

• day-click(date, jsEvent, view) - Triggered on dayClick()

  day-click(date，jsEvent，view) -在dayClick()上触发

You can listen for these events using the following markup

您可以使用以下标记来监听这些事件

<lunar-full-calendar:event-sources="eventSources"@event-selected="eventSelected"
></lunar-full-calendar>

听 (Listens on)

• render-event(event) - Adds a new event to calendar

  render-event(event) -向日历添加一个新事件

• remove-event(event) - Removes event from calendar

  remove-event(event) -从日历中删除事件

• rerender-events() - Rerenders events to reflect local changes

  rerender-events() -重新渲染事件以反映本地更改

• refetch-events() - Makes another JSON call to event sources

  refetch-events() -对事件源进行另一个JSON调用

• reload-events() - Removes all events and adds all events in this.events

  reload-events() -删除所有事件并在this.events中添加所有事件

You can trigger these events in the parent component like so...

您可以像这样在父组件中触发这些事件...

<lunar-full-calendarref="calendar":event-sources="eventSources"
></lunar-full-calendar>
...
<script>...methods: {refreshEvents() {this.$refs.calendar.$emit('refetch-events')},}...
</script>

翻译自: https://vuejsexamples.com/chinese-lunar-calendar-for-fullcalendar/

js日历农历