สวัสดีครับ บทความนี้ขอมาอัพเดทไลบรารี่ปฏิทินที่ผมเคยทำไว้ (แล้วใช้ไม่ค่อยได้) ให้มันดีขึ้นอีกนิด พอดีมีเพื่อนคนนึง เขาจะทำแอปี่มีปฏิทินคล้ายๆแบบนี้ เลยสนใจจะใช้ไลบรารี่ตัวนี้ในงานของเขา (คิดดีแล้วเหรอ) แต่ว่าอันเก่ามันใช้ยากและมีบัค เลยต้องมาอัพเดทแก้ไขนั่นเอง

การใช้งาน

ดาวน์โหลดไฟล์ .aar แล้วสร้าง module ใน Android studio project

calendarevent2
update 17 Jul 2017

วิธีการนำไฟล์ .aar มาใช้งาน สามารถอ่านได้จากบทความข้างล่างนี้

Android Tip : การนำไลบรารี่ ไฟล์ .aar มาใช้ใน Android studio

MyEventListView

คลาส MyEventListView เป็น ListView ที่เอาไว้แสดงรายการวันสำคัญ หรือ event ต่างๆ ซึ่งสามารถปรับสี ปรับธีมได้เล็กน้อย
เปลี่ยนชื่อจาก ListMyEventView

กำหนด ListMyEventView ใน xml

 <com.benzneststudios.eventcalendar2.view.MyEventListView
        android:id="@+id/listView_my_event"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

ตัวอย่างการใช้งาน และแสดงข้อมูลสมมุติ

MyEventListView  listView = (MyEventListView) rootView.findViewById(R.id.listView_my_event);
listView.setDisplayColorDayOfWeek(true);
listView.setTheme(MyEventListView.THEME_LIGHT);

กำหนดให้ แสดงสีประจำวันในแต่ละวัน

listView.setDisplayColorDayOfWeek(true);

กำหนดธีม มีให้เลือก 2 อันคือ Dark , Light โดย default คือ Dark

listView.setTheme(ListMyEventView.THEME_DARK);
listView.setTheme(ListMyEventView.THEME_LIGHT);

กำหนดสีได้ดังนี้ หากอันไหนไม่ได้กำหนด ก็จะเป็นสีตามธีมที่เลือกไว้

        listView.setTextTitleColor(R.color.colorAccent);
        listView.setTextDescriptionColor(R.color.colorAccent);
        listView.setTextDayColor(R.color.colorAccent);
        listView.setTextDayOfWeekColor(R.color.colorAccent);
        listView.setTextTimeColor(R.color.colorAccent);
        listView.setTextMonthColor(R.color.theme_dark_text);
        listView.setBackgroundEventColor(R.color.theme_light_background);
        listView.setBackgroundMonthColor(R.color.colorAccent);

OnEventSelectedListener

สามารถรู้ข้อมูลของแถวที่เลือกได้ โดยการ setOnEventSelectedListener

listView.setOnEventSelectedListener(new CustomRowEventCalendar.OnEventSelectedListener() {
            @Override
            public void onEventSelected(Event event, int month, int year) {
                Toast.makeText(getContext(),
                        "Event id = " + event.getEventId(), Toast.LENGTH_SHORT).show();
            }
});

การนำข้อมูลจริงมาใช้งาน

ข้อมูลที่จะนำมาใช้จะเหมาะกับ JSON ที่มีลักษณะประมาณข้างล่างนี้ คือแยก event ตามเดือน (เหมือนเวอชันเดิม)

{
  "calendars": [
    {
      "year": "2016",
      "month": "7",
      "events": [
        {
          "id": 1,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        },
        {
          "id": 2,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        }
      ]
    },
    {
      "year": "2016",
      "month": "8",
      "events": [
        {
          "id": 3,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        }
      ]
    },
    {
      "year": "2016",
      "month": "12",
      "events": [
        {
          "id": 4,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        },
        {
          "id": 5,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        },
        {
          "id": 6,
          "title": "Thumbnail label",
          "description": "ras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
          "time": "18:00",
          "bgcolor": "#dd4b39"
        }
      ]
    }
  ]
}

วาดรูปก็คงจะมีลักษณะประมาณนี้

เช่น ลองสร้างรายการของ event สำหรับ 1 เดือน โดยเดือนนี้มี 7 event

สร้าง EventMonth ขึ้นมา และกำหนดค่าเดือน และปี

EventMonth eventMonth = new EventMonth();
eventMonth.setMonth(month);
eventMonth.setYear(year);

และสร้าง ArrayList<Event> และสมมุติข้อมูล Event  7 อัน และกำหนดค่าต่างๆ เช่น title

ArrayList<Event> events = new ArrayList<>();
            for (int i = 1; i <= 7; i++) {
                Event event = new Event();
                event.setEventId("" + event_id);
                event_id++;

                event.setDays(day);
                event.setMonth(month);
                event.setTitle("Thumbnail label");
                event.setTime("18:00");
                event.setDescription("Cras justo odio, dapibus ac facilisis in.");
                event.setDaysOfWeek(dayOfWeek);
                events.add(event);
            }

แล้วก็มากำหนดค่า รายการของ event ให้ EventMonth อีกที

eventMonth.setListEvent(events);

ทีนี้ก็ทำให้เป็น ArrayList<EventMonth> และนำมาใส่ใน EventListViewAdapter

จะเห็นว่า ถ้ามีข้อมูลรูปแบบคล้ายๆ JSON อย่างที่บอกไป หรือแยก event ตามเดือนมาก็จะสามารถทำ Model แล้วนำมาใช้ได้ง่ายๆเลย

CalendarFragment

คลาส CalendarFragment เป็น fragment ตามชื่อเลย เจ้าตัวนี้คือเอาไว้เปิด ปฏิทินขึ้นมา โดยจะใช้ข้อมูลลักษณะเดียวกันกับ MyEventListView

วิธีการใช้งาน

เตรียมข้อมูลของปฏิทิน ArrayList<EventMonth> ให้เรียบร้อย
จากนั้นสร้าง CalendarFragment

ArrayList<EventMonth> listEventMonth = MyEventListView.getSampleData();
int currentMonth = 1;
int currentYear = 2017;

แล้วสร้าง CalendarFragemnt ขึ้นพร้อมกำหนดข้อมูลลงไป
currentMonth , currentYear คือ เดือนและปีที่ต้องการให้เป็นค่าเริ่มต้น

CalendarFragment calendar = CalendarFragment.newInstance();
calendar.setListEventMonth(listEventMonth);
calendar.setCurrentMonth(currentMonth);
calendar.setCurrentYear(currentYear);

กำหนดสีต่างๆ ธีม พื้นหลัง โดยธีมมีให้เลือกคือ Dark , Light

        calendar.setTheme(CalendarFragment.THEME_LIGHT);
        calendar.setBackgroundHeaderMonthCalendar(R.color.colorThursday);
        calendar.setBackgroundHeaderDayCalendar(R.color.colorFriday);
        calendar.setTextMonthColor(R.color.white);
        calendar.setCircleTodayHighlightColor(R.color.colorFriday);
        calendar.setTextDayHeaderColor(R.color.white);

กำหนด การ click เมื่อผู้ใช้กดวันที่บนปฏิทิน จะส่งค่าตัวแปร dayCalendar กลับมา
ซึ่งใน dayCalendar จะมีข้อมูลวันที่และรายการ event อีกที (ใน 1 วันอาจจะมีหลาย event ก็ได้)

        calendar.setOnDayCalendarSelectedListener(new CustomDayInCalendar.OnDayCalendarSelectedListener() {
            @Override
            public void onDaySelected(DayCalendar mDayCalendar) {
                Toast.makeText(MainActivity.this, "EVENT_COUNT = " + mDayCalendar.getEvent().size(), Toast.LENGTH_SHORT).show();
            }
        });

สุดท้ายคือการเปิด ปฏิทินขึ้นมาโดยใช้คำสั่ง toggleCalendar
R.id.content_container คือ view ที่เอาไว้สำหรับให้ ปฏิทินไปแปะทับ

calendar.toggleCalendar(MainActivity.this, R.id.content_container);

จากนั้นปฏิทินจะถูกเปิดขึ้นมา ตามที่กำหนดเอาไว้

การกำหนดจุดวงกลมบนปฏิทิน สามารถกำหนดได้ที่ตอนสร้างจาก คลาส Event

Event event = new Event();
event.setPointColor(color);
event.setCirCleColor(color);

การกำหนดวงกลม ของวันนี้ ให้แตกต่าง

CalendarFragment.setCircleTodayHighlightColor(color);

สามารถเรียกคำสั่ง show , close ได้เช่นกันในการแสดงปฏิทิน

// Check display
boolean display = calendarFragment.isDisplayCalendar()

// Show calendar
calendarFragment.show(MainActivity.this , R.id.content_container);

// Close calendar
calendarFragment.close(MainActivity.this);