时光

时光的时光轴

寄以时间,予以文字
telegram
github
微信公众号

Update the schedule through the calendar.

Is your course schedule also like this? All courses are stacked together, and you have to calculate the week, find the teacher, and calculate the time before each class. Maybe after a while, you will remember all of this, but soon a semester will pass, and you will have to start all over again.

Before enrollment, I also looked into this issue and found several "course schedule" apps recommended online, which are highly ranked in the app store. To be honest, they are more like "college student social platforms".

There is a "Xiao Ai Course Schedule" that fits my needs, and it accepts adaptation by individual developers. However, I tried to apply for qualification twice but didn't receive any response. There are also frequent bug reports in the communication group, and I also found many problems during the simple experience process...


But at this time, I turned my attention to the built-in "Calendar" app. I remembered that a long time ago, Apple's built-in calendar did not support Chinese holidays (annoying), and there were many methods on the internet to solve this problem by subscribing to calendars. This method not only allows the distribution of schedules through the server but also allows regular updates. The most important thing is that the created schedules are exactly the same as the regular reminder function, which made me very curious about how it was implemented.

Protocol#

First, I need to understand how others have implemented it.

When accessing the subscription link, a .ics file will be downloaded. After some investigation, I found that it belongs to the "iCalendar" protocol. The word starting with "i" reminded me of Apple, and it turns out that there are indeed some connections. The distribution protocol is a standard called "WebCal", and the subscription schedule is implemented based on these two technologies.

You can find information about the format on iCalendar.

iCalendar Format#

Based on my own level, I have made the best effort to describe the key parts of the format, but there may still be errors. Please correct me if you find any.

I exported an .ics file using the Apple Calendar to understand its format:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:Flight Plan
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:The takeoff and landing times are based on the flight plan and are for reference only.
DTEND;TZID=Asia/Shanghai:20200901T170000
DTSTART;TZID=Asia/Shanghai:20200901T150500
SUMMARY:Take flight HO1072 from Changsha Huanghua to Shanghai Pudong, local time 15:05-17:00 [Flight Travel]
URL;VALUE=URI:umetrip://OPENAPP
END:VEVENT
END:VCALENDAR

Some nodes, such as "Dynamic Time Zone", have been removed. After testing, it does not affect the actual schedule, and as a tutorial for the GMT+8 time zone, it gave me a headache.

The file is enclosed between "BEGIN" and "END". You can find more information about the detailed file format on their official website.

  • X-WR-CALNAME defines the name of the calendar.
  • X-APPLE-CALENDAR-COLOR is used by Apple Calendar to define the color of the event.

Then there is the "BEGIN" and "END" section, which defines an event.

  • CREATED indicates the creation date.
  • DESCRIPTION contains remarks/descriptions.
  • SUMMARY is the title.
  • DTEND;TZID specifies the end date and the time zone.
  • DTSTART;TZID specifies the start date and the time zone.
  • URL;VALUE is the URL address of the event, which can be clicked.

You can use the Outlook web version to quickly test your own calendar.
So I followed suit and wrote one:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:Course Schedule
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:Teacher: Cao Huashan\nCredits: 5.0
DTSTART;TZID=Asia/Shanghai:20201003T160000
DTEND;TZID=Asia/Shanghai:20201003T193000
LOCATION:Teaching Building C404
SUMMARY:Web Design Comprehensive Training
URL;VALUE=URI:hello
END:VEVENT
END:VCALENDAR

Save it as a text file with the .ics extension and try to import it into Outlook. You will see the added effect.

a355fdfd-e4f8-49fa-a8d9-a544cb91c5c7.png

During the debugging process, I found that each calendar has some "proprietary parameters". For example, Apple Calendar has the "X-APPLE-CALENDAR-COLOR" parameter, which can define the display color of the schedule.

In further research, I should try several other calendar apps and study their proprietary parameters to make the course schedule more unique. The next step is to convert the course data.

Data Conversion#

First, the course schedule provided by your school's academic system needs to be converted into structured data. Since different schools have different systems, I will use my school's academic website as an example.

However, our school is quite ridiculous. When querying the course schedule, it returns an image...

cf63f138-6f9f-4d78-bf48-246853433bc1.png

Are they afraid that someone will steal the course schedule?

Fortunately, where there is a will, there is a way. If you query the course schedule by "course" or "classroom", it returns text that can be processed (I don't know why it was designed this way).

So, I will start from here:

Query by Course#

By examining the logic of querying courses, you can obtain a list of courses. However, the academic system surprisingly has a CAPTCHA:

fbfd0c90-ada2-4fc1-82b8-155f5a413dc6.png

However, this CAPTCHA is not complicated, so I solved it with a simple OCR. After some tinkering, I organized the data as follows:

	array(2) {
  [0]=>
  array(6) {
    ["name"]=>
    string(25) "130601|Customer Relationship Management"
    ["teacher"]=>
    string(6) "Han Mei"
    ["type"]=>
    string(19) "Major Course/Required"
    ["week"]=>
    string(4) "1-18"
    ["day"]=>
    string(11) "Tuesday[1-2]"
    ["location"]=>
    string(13) "Teaching Building A401"
  }
  [1]=>
  array(6) {
    ["name"]=>
    string(28) "130625|Business Negotiation and Etiquette"
    ["teacher"]=>
    string(9) "Wang Xiaoxia"
    ["type"]=>
    string(19) "Major Course/Required"
    ["week"]=>
    string(4) "1-18"
    ["day"]=>
    string(11) "Wednesday[3-4]"
    ["location"]=>
    string(13) "Teaching Building C502"
  }
}

Then, based on the academic system's returned academic calendar and class schedule, I processed the entire course data, and the next step is to generate the ics file.

Generating the ICS File#

Assemble the data according to the target format, which is similar to the previous example:

BEGIN:VCALENDAR
VERSION:2.0
X-WR-CALNAME:Course Schedule
X-APPLE-CALENDAR-COLOR:#63DA38
BEGIN:VEVENT
DESCRIPTION:Teacher: Cao Huashan\nCredits: 5.0
DTSTART;TZID=Asia/Shanghai:20201003T160000
DTEND;TZID=Asia/Shanghai:20201003T193000
LOCATION:Teaching Building C404
SUMMARY:Web Design Comprehensive Training
URL;VALUE=URI:hello
END:VEVENT
END:VCALENDAR

Then import the file into Outlook, and you will see the effect.

Subscribing to the Calendar#

To implement the "WebCal" protocol, it is actually quite simple. It is essentially an HTTP request. You just need to add the following to the response header:

Content-type: text/calendar; charset=utf-8
Content-Disposition: attachment; filename="table.ics"

This will allow normal subscription in calendar apps.

However, referring to the iCalendar specification, each event should have a "UID" field, which makes it easier for the client to identify and update events. Although there is a specification for the UID, in practice, you just need to make sure it is different from the UID of other events. Here, I simply used the name of the individual course, date, and class period to calculate the MD5 hash.

Final Result#

On mobile devices:
87eba7a3-1abf-4b77-a65f-87320789c9e4.png
On Outlook:
c4b7f146-b0b4-4f31-b325-8dec435fc9aa.png
By the way, Windows 10 and above systems can subscribe to the system calendar through Outlook and also support lock screen reminders!

User-Friendly#

The basic process is now complete, but the ultimate goal is to make the service simple and user-friendly!

Currently, the update task (pulling data from the academic system every week) is deployed on a cloud function, which generates static files directly. The frontend is hosted anywhere to provide the service.

In terms of data, the strategy is to only pull data for the first two weeks, the current week, and the next four weeks from the academic system. This will improve performance with each update.

The service has been deployed on a website: Subscribe to Course Schedule
I have tested it on Apple devices with calendar apps, Windows 10 and Windows 11, as well as Xiaomi, Huawei, and Vivo devices, and they can all import the schedule directly.

For other Android devices, you can use the "ICSX5" app, which covers most Android devices.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.