การใช้ไลบรารี่ Material Calendar View เพื่อแสดงปฏิทิน

ไลบรารี่ Material Calendar View

ถ้าเครื่อง Android กำหนดเป็นภาษาอังกฤษก็จะได้ปฏิทินภาษาอังกฤษเหมือนภาพซ้าย
ถ้าเครื่อง Android กำหนดเป็นภาษาไทยก็จะได้ปฏิทินภาษาไทยเหมือนภาพขวา

แสดงวันที่มี Event เป็นจุดสีแดงใต้วันนั้นๆ

build.gradle (Project: MyApplication)

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.0'
        

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {

repositories {

google()

jcenter()

}

dependencies {

classpath 'com.android.tools.build:gradle:3.2.0'

// NOTE: Do not place your application dependencies here; they belong

// in the individual module build.gradle files

}

allprojects {

repositories {

google()

jcenter()

maven { url 'https://jitpack.io' }

}

task clean(type: Delete) {

delete rootProject.buildDir

}

build.gradle (Module: app)

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.phaisarn.myapplication"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    implementation 'com.github.prolificinteractive:material-calendarview:2.0.0'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 28

defaultConfig {

applicationId "com.phaisarn.myapplication"

minSdkVersion 21

targetSdkVersion 28

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:28.0.0'

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

implementation 'com.github.prolificinteractive:material-calendarview:2.0.0'

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.prolificinteractive.materialcalendarview.MaterialCalendarView
        android:id="@+id/calendarView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mcv_selectionColor="#00F"
        app:mcv_showOtherDates="all" />

</LinearLayout>

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

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

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".MainActivity">

<com.prolificinteractive.materialcalendarview.MaterialCalendarView

android:id="@+id/calendarView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:mcv_selectionColor="#00F"

app:mcv_showOtherDates="all" />

</LinearLayout>

MainActivity.java

package com.phaisarn.myapplication;

import android.graphics.Color;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;

import com.prolificinteractive.materialcalendarview.CalendarDay;
import com.prolificinteractive.materialcalendarview.CalendarMode;
import com.prolificinteractive.materialcalendarview.MaterialCalendarView;
import com.prolificinteractive.materialcalendarview.OnDateSelectedListener;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import static org.threeten.bp.DayOfWeek.of;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MaterialCalendarView calendarView = findViewById(R.id.calendarView);

        calendarView.state().edit()
                .setFirstDayOfWeek(of(Calendar.SUNDAY))
                .setMinimumDate(CalendarDay.from(2018, 1, 1))
                .setMaximumDate(CalendarDay.from(2018, 12, 31))
                .setCalendarDisplayMode(CalendarMode.MONTHS)
                .commit();

        calendarView.setOnDateChangedListener(new OnDateSelectedListener() {
            @Override
            public void onDateSelected(@NonNull MaterialCalendarView materialCalendarView,
                                       @NonNull CalendarDay calendarDay, boolean b) {
                Toast.makeText(getApplicationContext(), "DateChanged", Toast.LENGTH_SHORT).show();
            }
        });


        CalendarDay eventDay;
        List<CalendarDay> calendarDays = new ArrayList<>();

        eventDay = CalendarDay.from(2018, 8, 28);
        calendarDays.add(eventDay);

        eventDay = CalendarDay.from(2018, 9, 18);
        calendarDays.add(eventDay);

        eventDay = CalendarDay.from(2018, 9, 20);
        calendarDays.add(eventDay);

        calendarView.addDecorator(new EventDecorator(Color.RED, calendarDays));
    }
}

package com.phaisarn.myapplication;

import android.graphics.Color;

import android.support.annotation.NonNull;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.Toast;

import com.prolificinteractive.materialcalendarview.CalendarDay;

import com.prolificinteractive.materialcalendarview.CalendarMode;

import com.prolificinteractive.materialcalendarview.MaterialCalendarView;

import com.prolificinteractive.materialcalendarview.OnDateSelectedListener;

import java.util.ArrayList;

import java.util.Calendar;

import java.util.List;

import static org.threeten.bp.DayOfWeek.of;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

MaterialCalendarView calendarView = findViewById(R.id.calendarView);

calendarView.state().edit()

.setFirstDayOfWeek(of(Calendar.SUNDAY))

.setMinimumDate(CalendarDay.from(2018, 1, 1))

.setMaximumDate(CalendarDay.from(2018, 12, 31))

.setCalendarDisplayMode(CalendarMode.MONTHS)

.commit();

calendarView.setOnDateChangedListener(new OnDateSelectedListener() {

@Override

public void onDateSelected(@NonNull MaterialCalendarView materialCalendarView,

@NonNull CalendarDay calendarDay, boolean b) {

Toast.makeText(getApplicationContext(), "DateChanged", Toast.LENGTH_SHORT).show();

}

});

CalendarDay eventDay;

List<CalendarDay> calendarDays = new ArrayList<>();

eventDay = CalendarDay.from(2018, 8, 28);

calendarDays.add(eventDay);

eventDay = CalendarDay.from(2018, 9, 18);

calendarDays.add(eventDay);

eventDay = CalendarDay.from(2018, 9, 20);

calendarDays.add(eventDay);

calendarView.addDecorator(new EventDecorator(Color.RED, calendarDays));

}

บรรทัดที่ 29 : กำหนดคุณสมบัติให้ปฏิทิน เช่น กำหนดวันแรกของสัปดาห์ กำหนดวันเริ่มต้น วันสิ้นสุด กำหนดรูปแบบปฏิทินแสดงเป็นสัปดาห์ เป็นเดือน
บรรทัดที่ 36 : รอรับอีเวนต์เมื่อผู้ใช้คลิกเลือกวันที่ด้วย setOnDateChangedListener() เลือกวันเดิมก็เรียกอีเวนต์นี้ด้วย (ใช้แทน setOnClickListener())
บรรทัดที่ 57 : กำหนดวันที่มี events (วันที่มีจุดใต้วัน)

EventDecorator.java

package com.phaisarn.myapplication;

import com.prolificinteractive.materialcalendarview.CalendarDay;
import com.prolificinteractive.materialcalendarview.DayViewDecorator;
import com.prolificinteractive.materialcalendarview.DayViewFacade;
import com.prolificinteractive.materialcalendarview.spans.DotSpan;

import java.util.Collection;
import java.util.HashSet;

public class EventDecorator implements DayViewDecorator {

    private final int color;
    private final HashSet<CalendarDay> dates;

    public EventDecorator(int color, Collection<CalendarDay> dates) {
        this.color = color;
        this.dates = new HashSet<>(dates);
    }

    @Override
    public boolean shouldDecorate(CalendarDay day) {
        return dates.contains(day);
    }

    @Override
    public void decorate(DayViewFacade view) {
        view.addSpan(new DotSpan(5, color));
    }
}

package com.phaisarn.myapplication;

import com.prolificinteractive.materialcalendarview.CalendarDay;

import com.prolificinteractive.materialcalendarview.DayViewDecorator;

import com.prolificinteractive.materialcalendarview.DayViewFacade;

import com.prolificinteractive.materialcalendarview.spans.DotSpan;

import java.util.Collection;

import java.util.HashSet;

public class EventDecorator implements DayViewDecorator {

private final int color;

private final HashSet<CalendarDay> dates;

public EventDecorator(int color, Collection<CalendarDay> dates) {

this.color = color;

this.dates = new HashSet<>(dates);

}

@Override

public boolean shouldDecorate(CalendarDay day) {

return dates.contains(day);

}

@Override

public void decorate(DayViewFacade view) {

view.addSpan(new DotSpan(5, color));

}

Link

Phaisarn Sutheebanjard

blog.phaisarn.com

การใช้ไลบรารี่ Material Calendar View เพื่อแสดงปฏิทิน