Giter VIP home page Giter VIP logo

wx_calendar's Introduction

Build Status Libraries.io dependency status for GitHub repo

Demo

以下为一个简单日历展示的使用方法

{
  "usingComponents": {
    "calendar": "/your_component_path/calendar/index"
  }
}

在页面 wxml 中引入组件

<calendar />

更多自定义配置及功能 请查阅日历文档

效果图

日历效果图

wx_calendar's People

Contributors

arrowfeng avatar bolingsun avatar codacy-badger avatar dependabot[bot] avatar holazz avatar liuxdi avatar luanyujia avatar molly2molly avatar treadpit avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wx_calendar's Issues

日期选择器能否把年月分开?

日期选择器选择过去的日子麻烦,把年、月分别用箭头跳转会方便不少,大致是这个样子:

《 五月》 《 2018 》

这很容易实现吧?

求教

怎么获取到点击的日期呢?
const conf = {
multi: false,
onTapDay(currentSelect, event) {
getSelectedDay();
},
};
这么写没反应,而且用onTapDay点击后背景色不会到选中的那个日期

初始化时能否去掉默认的今天

现有个需求,根据日历选择时间,后端返回事件标记的日期然后重新渲染日历,但是日历重新渲染又跳转到今天了,这是为什么???急!急!急!

使用文档说明未补充完成

1.、未提供获取日期的函数
2、 未提供可重写的点击事件函数
比如选中 日历中某一天 返回当前时间字段 ,这样的话这个日历就只是做展示使用了

setTodoLabels设置非当月日期后 无法显示

当月是2018年9月11日

setTodoLabels({
            pos: 'bottom',
            dotColor: '#40',
            days: [{
              year:2018,
              month:10,
              day:2
            }]
});

设置10月的待办,然后切换到10月,日历上不显示

但是如果同时标记了当前月和10月就可以显示

 setTodoLabels({
            pos: 'bottom',
            dotColor: '#40',
            days: [{
              year:2018,
              month:10,
              day:2
            },{
              year:2018,
              month:9,
             day:10
             }]
         });

周日历不支持enableArea

enableArea选定范围之后月日历没问题,但在周日历的情况下左滑右滑切换时间之后选定的范围就没有效果了

enableArea选定日期无效

enableArea选定(2018-09-01至2019-01-31)有效日期会多三天,到2019-02-03,应该是没计算10,11,01月31号,

日历单选时,afterTapDay函数返回空值

`
Page({
onShow: function() {
const conf = {
/multi: true, // 是否开启多选,/
afterTapDay: (currentSelect) => {
console.log(currentSelect) // return {}
},
}
initCalendar(conf); // 使用默认配置初始化日历
}

});`

月份改变时,事项加载错误

setTodoLabels({
pos: 'bottom',
dotColor: '#40',
days: [{
year: 2018,
month: 9,
day: 12,
}, {
year: 2018,
month: 9,
day: 15,
}, {
year: 2018,
month: 8,
day: 5,
}],
});
当初始化时显示9月,9/12和9/15事项加载正确,但是切换到8月时,显示还是12号和15号事项

获取当前选择的时间

如果获取当前的时间?我用你文档里面的引入方式就报错了,怎么回事?还有我想请教一下 怎么给当前时间上面赋值?要动态赋值对应的时间

禁选

请问怎么禁选部分日期的

关于事件标记的问题

第一个问题是,事件标记只能设置在当前月嘛?我试了设置其他月份的事件标记,都是没有显示出来的;
第二个问题是,setTodoLabels方法为什么不能在非initCalendar的地方调用呢?如果不能的话,要怎么实现动态更新有事件标记的日期呢?
最后表达一下对作者的感谢之情~帮了我挺大忙的

在taro中以模板形式引入,日历内容不能显示

在taro中以模板形式引入,日历内容不能显示
image
没有任何报错,代码如下:

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

import Calendar from './calendar/index'

import './calendar/index.wxss'

/**
 * 需要注意的是,在项目的 config/index.js 文件中,有 copy 模板与样式的操作
 */
const conf = { 
  disablePastDay: true, // 是否禁选过去的日期
  /**
   * 选择日期后执行的事件
   * @param { object } currentSelect 当前点击的日期
   * @param { array } allSelectedDays 选择的所有日期(当mulit为true时,才有allSelectedDays参数)
  */
  afterTapDay: (currentSelect, allSelectedDays) => {},
  /**
   * 日期点击事件(此事件会完全接管点击事件)
   * @param { object } currentSelect 当前点击的日期
   * @param { object } event 日期点击事件对象
   */
  onTapDay(currentSelect, event) {},
  /**
   * 日历初次渲染完成后触发事件,如设置事件标记
   */
  afterCalendarRender() {},
}

export default class calendarComponent extends Component {
  componentDidMount () {
    Calendar(conf);
  }

  render () {
    return (
      <View>
        <import src='./calendar/index.wxml' />
        <view class="calendar-wrap">
          <template is="calendar" data="{{...calendar}}" />
        </view>
      </View>
    )
  }
}

发现一个bug

指定日期待办事项标记:日期不在本地写死,而是从接口获取的情况下,点击待办事项后,标记点会消失

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.