微信小程序之自定义日历组件

我们单位实行的大小周工作制，即大周休息2天，小周消息一天。因这点小特殊，总有同事常记错周六这天是否上班。也因这点，在程序上需要特别体现出大小周的提示，于是需要设计一个日历组件，并在日历上标注出排班名称和大小周。最终实现图如下:

微信小程序demo提供了一个简单的日历组件，vant也提供了一个日历组件，在github上也有一些日历组件，我试用了一番，都多少存在一些不符合之处。重点说一下vant，它有几个问题：一是加载数据太大，一运行就加载至少一年以上的数据；二是样式不好控制，大小相修改一下就会变形；三是在日期上下方加文字不方便。

因为没有找到太好的组件可以引用，就自己想设计一个能方便控制的，遂有下面的设计，

1、采用grid组件显示日期，分三行，中间一行为日期具体天的数字，上面一行显示大小周提示、下面一行显示排班名称

2、采用scroll-view动态包含grid数目

3、一行显示几天，可以动态设置

1、日历头部

2、日历内容

3、日历结构体

4、具体每个月的日历算法

获取某个月的第一天和最后一天，再获取每天的星期数，循环放到grid结构体中

优点：一是加载数据量少，可控制；二是显示内容丰富，可以控制；三是也是显示可以使用slot，更加丰富

缺点：一不是专业日历组件，样式简单了些；二是加载数据量有限，grid自身也是一个组件，加载多了额外的开销肯定大起来。

因为日历是系统自带的，所以读写它一定要申请权限,也就是在AndroidManifest.xml加如下两行代码(一个读一个写):

<uses-permission android:name="android.permission.READ_CALENDAR"/>

<uses-permission android:name="android.permission.WRITE_CALENDAR"/>

Android中日历用了三个URL,分别是日历用户的URL,事件的URL，事件提醒URL,三个URL在Android2.1之前是如下的样子：

calanderURL = "content://calendar/calendars"

calanderEventURL = "content://calendar/events"

calanderRemiderURL= "content://calendar/reminders"

但是在Android2.2版本以后,三个URL有了改变，变成如下的样子:

calanderURL = "content://com.android.calendar/calendars"

calanderEventURL = "content://com.android.calendar/events"

calanderRemiderURL = "content://com.android.calendar/reminders"

简单的Demo,按照我的步骤一步一步的来:

第一步:新建一个Android工程命名为CalendarDemo.

第二步:修改main.xml布局文件,增加了三个按钮,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello"

/>

<Button

android:id="@+id/readUserButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Get a User"

/>

<Button

android:id="@+id/readEventButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Get a Event"

/>

<Button

android:id="@+id/writeEventButton"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Input a Event"

/>

</LinearLayout>

第三步:修改主核心程序CalendarDemo.java，代码如下:

package com.tutor.calendardemo

import java.util.Calendar

import android.app.Activity

import android.content.ContentValues

import android.database.Cursor

import android.net.Uri

import android.os.Build

import android.os.Bundle

import android.view.View

import android.view.View.OnClickListener

import android.widget.Button

import android.widget.Toast

public class CalendarDemo extends Activity implements OnClickListener {

private Button mReadUserButton

private Button mReadEventButton

private Button mWriteEventButton

private static String calanderURL = ""

private static String calanderEventURL = ""

private static String calanderRemiderURL = ""

//为了兼容不同版本的日历,2.2以后url发生改变

static{

if(Integer.parseInt(Build.VERSION.SDK) >= 8){

calanderURL = "content://com.android.calendar/calendars"

calanderEventURL = "content://com.android.calendar/events"

calanderRemiderURL = "content://com.android.calendar/reminders"

}else{

calanderURL = "content://calendar/calendars"

calanderEventURL = "content://calendar/events"

calanderRemiderURL = "content://calendar/reminders"

}

}

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.main)

setupViews()

}

private void setupViews(){

mReadUserButton = (Button)findViewById(R.id.readUserButton)

mReadEventButton = (Button)findViewById(R.id.readEventButton)

mWriteEventButton = (Button)findViewById(R.id.writeEventButton)

mReadUserButton.setOnClickListener(this)

mReadEventButton.setOnClickListener(this)

mWriteEventButton.setOnClickListener(this)

}

@Override

public void onClick(View v) {

if(v == mReadUserButton){

Cursor userCursor = getContentResolver().query(Uri.parse(calanderURL), null,

null, null, null)

if(userCursor.getCount() >0){

userCursor.moveToFirst()

String userName = userCursor.getString(userCursor.getColumnIndex("name"))

Toast.makeText(CalendarDemo.this, userName, Toast.LENGTH_LONG).show()

}

}else if(v == mReadEventButton){

Cursor eventCursor = getContentResolver().query(Uri.parse(calanderEventURL), null,

null, null, null)

if(eventCursor.getCount() >0){

eventCursor.moveToLast()

String eventTitle = eventCursor.getString(eventCursor.getColumnIndex("title"))

Toast.makeText(CalendarDemo.this, eventTitle, Toast.LENGTH_LONG).show()

}

}else if(v == mWriteEventButton){

//获取要出入的gmail账户的id

String calId = ""

Cursor userCursor = getContentResolver().query(Uri.parse(calanderURL), null,

null, null, null)

if(userCursor.getCount() >0){

userCursor.moveToFirst()

calId = userCursor.getString(userCursor.getColumnIndex("_id"))

}

ContentValues event = new ContentValues()

event.put("title", "与苍井空小-姐动作交流")

event.put("description", "Frankie受空姐邀请,今天晚上10点以后将在Sheraton动作交流.lol~")

//插入hoohbood@gmail.com这个账户

event.put("calendar_id",calId)

Calendar mCalendar = Calendar.getInstance()

mCalendar.set(Calendar.HOUR_OF_DAY,10)

long start = mCalendar.getTime().getTime()

mCalendar.set(Calendar.HOUR_OF_DAY,11)

long end = mCalendar.getTime().getTime()

event.put("dtstart", start)

event.put("dtend", end)

event.put("hasAlarm",1)

Uri newEvent = getContentResolver().insert(Uri.parse(calanderEventURL), event)

long id = Long.parseLong( newEvent.getLastPathSegment() )

ContentValues values = new ContentValues()

values.put( "event_id", id )

//提前10分钟有提醒

values.put( "minutes", 10 )

getContentResolver().insert(Uri.parse(calanderRemiderURL), values)

Toast.makeText(CalendarDemo.this, "插入事件成功!!!", Toast.LENGTH_LONG).show()

}

}

}

第四步:在AndroidManifest.xml中申请权限,代码如下:

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.tutor.calendardemo"

android:versionCode="1"

android:versionName="1.0">

<application android:icon="@drawable/icon" android:label="@string/app_name">

<activity android:name=".CalendarDemo"

android:label="@string/app_name">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

</application>

<uses-sdk android:minSdkVersion="7" />

<uses-permission android:name="android.permission.READ_CALENDAR"/>

<uses-permission android:name="android.permission.WRITE_CALENDAR"/>

</manifest>

第五步:运行上述Android工程,查看效果：

---