vue+fullcalendar实现月周日日历事件效果代码

代码语言:html

所属分类:其他

代码描述:vue+fullcalendar实现月周日日历事件效果代码

代码标签: 周日 日历 事件 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <style>
      body{
          background: white;
      }
  </style>
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fullcalendar.min.css">
  
<style>
.wrapper {
  margin: 2rem;
}
</style>



</head>

<body >
  <div id="app" class="wrapper">  
  <calendar class="fuck" :events="events" :editable="true"></calendar>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment-with-locales.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fullcalendar.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.1.0.11.js"></script>
      <script >
Vue.component('calendar', {
  template: '<div></div>',

  props: {
    events: {
      type: Array,
      required: true },


    editable: {
      type: Boolean,
      required: false,
      default: false },


    droppable: {
      type: Boolean,
      required: false,
      default: false } },



  data: function ()
  {
    return {
      cal: null };

  },

  ready: function ()
  {
    var self = this;
    self.cal = $(self.$el);


    var args = {
      lang: 'en',
      header: {
        l.........完整代码请登录后点击上方下载按钮下载查看

网友评论0