JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

JS implements the curriculum timetable applet (imitating the super curriculum timetable) and adds a custom background function

Overview:

I drew lessons from several timetable software on the market. Because the functions are too complicated, I tried to make a timetable applet and open source it. It currently supports the functions of adding and deleting timetables, and also adds a daily timetable. Overall, it feels like a fairly concise timetable. The backend is developed based on fastadmin.

GIF demo:

The open source address of gitee will be placed at the bottom

Recently I always feel that the current interface is too simple and does not meet the needs of a decent person like me, so I added the function of customizing the background of the course schedule.
New pages added:

Effect:

You need to add an entry in mine.js:

{
                name: "Set the timetable background",
                icon: "/images/scheduleIcon.png",
                url: "/pages/schedule/schedule?",
            },

Add a new page schedule

wxml code

<view style="height:{{CustomBar}}px;">
    <view class="cu-bar ev-fr-start" bindtap="BackPage" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
        <text class="cuIcon-back padding-lr-sm"></text>
        <view class="action">{{couples? "Set background for Ta":"Set the timetable background"}}</view>
    </view>
</view>
<view wx:if="{{couples}}" class="ev-mainBody">
    <view class="ev-fc-center">
        <view wx:if="{{!CouplesBG}}" data-type='Couples' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload background</text>
        </view>
        <view wx:if="{{CouplesBG}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='Couples' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{CouplesBG}}" />
            </view>
            <view class="round BGState">Couple timetable background</view>
        </view>
    </view>
    <view class="padding-top">
        <view class="title">Background start display time</view>
        <dateTimePicker type="minute" bind:change="TimePicker">
            <view class="sendTimeBox ev-fr">
                <input type="text" class="sendTime padding-lr" disabled="{{true}}" value="{{sendTime}}" />
                <text style="font-size:24px;color:#92979D" class="cuIcon-triangledownfill padding-lr-sm"></text>
            </view>
        </dateTimePicker>
    </view>
    <view class="padding-top">
        <view class="title">Set background display duration</view>
        <button wx:for="{{displayTimeList}}" wx:key="index" class="cu-btn round margin-tb {{item.checked ? 'bg-blue':''}} margin-right" data-id="{{index}}" bind:tap="showTime">
            {{item.label}}
        </button>
    </view>
    <button bind:tap="saveCouplesBG" disabled="{{!CouplesBG}}" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type="">
        Save</button>
</view>
<view wx:else class="ev-mainBody">
    <view>
        <image class="message" mode="scaleToFill" src="/images/scheduleIcon.png" />
    </view>
    <view>
        <text class="title">Set the timetable background</text>
        <view class="padding-top-sm tips">Users can upload their favorite pictures as the background display of the timetable (click on the picture to replace)</view>
    </view>
    <view class="ev-fr BGListBox">
        <view wx:if="{{dailySchedule}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='daily' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{dailySchedule}}" />
            </view>
            <view class="round BGState">Daily Schedule Background</view>
        </view>
        <view wx:if="{{!dailySchedule}}" data-type='daily' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload daily schedule background</text>
        </view>
        <view wx:if="{{weeklySchedule}}" class="BGBox ev-fc-center">
            <view class="BGImg" data-type='week' bind:tap="modifyImage">
                <image mode="aspectFill" src="{{weeklySchedule}}" />
            </view>
            <view class="round BGState">Weekly Schedule Background</view>
        </view>
        <view wx:if="{{!weeklySchedule}}" data-type='week' bind:tap="modifyImage" class="addBG ev-fc-center">
            <text class="cuIcon-roundadd" style="color:#5E99FB"></text>
            <text class="padding-xs" style="color:#5E99FB">Upload weekly timetable background</text>
        </view>
    </view>
    <button wx:if="{{(weeklySchedule || dailySchedule)}}" bind:tap="saveButton" class="cu-btn block bg-blue margin-tb-sm lg saveButton" style="bottom: {{StatusBar}}px;" type="">
        Restore default background</button>
</view>

js code

import {
    scheduleBG,
    couplesBG,
    couplesInfoAdd,
    setbgdefault,
} from "../../utils/api/user";
//Get the application instance const app = getApp();
const dayjs = require("../../utils/dayjs/dayjs.min");
import { wxShowToast } from "../../utils/promisify";
Page({
    data: {
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        ImgUrl: app.globalData.ImgUrl,
        displayArea: app.globalData.displayArea,
        CouplesBG: null, // Couples schedule background dailySchedule: null, // Daily schedule background weeklySchedule: null, // Weekly schedule background sendTime: "now", // Couples schedule background start time displayTimeList: [
            {
                label: "One day",
                checked: false,
                time: 1,
            },
            {
                label: "one week",
                checked: true,
                time: 7,
            },
            {
                label: "one month",
                checked: false,
                time: 30,
            },
        ],
        startTime: null,
    },
    onLoad: function (query) {
        let { index_bgimage, table_bgimage } = app.globalData.userInfo;
        this.setData({
            couples: query.couples ? query.couples : null,
            dailySchedule: index_bgimage
                ? app.globalData.ImgUrl + index_bgimage
                : null, //Daily schedule background weeklySchedule: table_bgimage
                ? app.globalData.ImgUrl + table_bgimage
                : null, // Weekly schedule background});
    },
    /**
     * Go back one page */
    BackPage() {
        wx.navigateBack({
            delta: 1,
        });
    },
    /**
     * Switch display time */
    showTime(e) {
        let id = e.currentTarget.dataset.id;
        console.log(e.currentTarget.dataset.id);
        let displayTimeList = this.data.displayTimeList.map((v, i) => {
            v.checked = id === i;
            return v;
        });
        this.setData({
            displayTimeList,
        });
    },
    /**
     * Modify background */
    modifyImage(e) {
        let type = e.currentTarget.dataset.type;
        wx.chooseImage({
            count: 1,
            sizeType: ["compressed"],
            sourceType: ["album"],
            success: (res) => {
                // tempFilePath can be used as the src attribute of the img tag to display images const tempFilePaths = res.tempFilePaths;
                switch (type) {
                case "week":
                    scheduleBG(tempFilePaths[0], "table").then((v) => {
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            weeklySchedule: tempFilePaths[0],
                        });
                    });
                    break;
                case "daily":
                    scheduleBG(tempFilePaths[0], "index").then((v) => {
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            dailySchedule: tempFilePaths[0],
                        });
                    });
                    break;
                case "Couples":
                    couplesBG(tempFilePaths[0]).then((v) => {
                        console.log(v);
                        app.getSet();
                        v.code && wxShowToast(v.msg);
                        this.setData({
                            CouplesBG:
                                    app.globalData.ImgUrl + v.data.imgurl,
                        });
                    });
                    break;
                default:
                    wxShowToast("Setting failed, please try again");
                    break;
                }
            },
        });
    },
    /**
     * Restore default background */
    saveButton() {
        this.setData({
            dailySchedule: null,
            weeklySchedule: null,
        });
        setbgdefault().then((v) => {
            v.code && wxShowToast(v.msg);
            app.getSet();
        });
    },
    /**
     * Start time of couple class schedule */
    TimePicker(e) {
        let day = dayjs(e.detail).format("MM月DD日");
        let am = dayjs(e.detail).format("A") == "PM" ? "afternoon" : "morning";
        let time = dayjs(e.detail).format("HH:mm");
        let sendTime = `${day} ${am} ${time}`;
        console.log(sendTime, "TimePicker");
        this.setData({
            sendTime,
            startTime: dayjs(e.detail),
        });
    },
    /**
     * Save couple background */
    saveCouplesBG() {
        let { displayTimeList, startTime, CouplesBG } = this.data;
        let endType = displayTimeList.filter((v) => v.checked === true)[0];
        let _startTime = startTime ? dayjs(startTime) : dayjs();
        let endTime = endType.time;
        let tid = app.globalData.userInfo.lovers_id;
        if (!tid) {
            wx.showToast({
                title: "Save failed",
                icon: "none",
                duration: 2000,
            });
            return;
        }
        couplesInfoAdd({
            tid,
            starttime: _startTime.unix(),
            endtime: endTime,
            love_sort: 1,
            contents: CouplesBG.replace(this.data.ImgUrl, ""),
        }).then((v) => {
            wxShowToast(v.msg);
            if (v.code) {
                app.getSet().then(() => {
                    this.BackPage();
                });
            }
        });
    },
});

wss code

headBox {
  width: 750rpx; }

page {
  background-color: #fff; }

.BGListBox {
  flex-wrap: wrap;
  justify-content: space-between; }

.BGBox {
  width: 321rpx;
  height: 321rpx;
  border-radius: 34rpx;
  overflow: hidden;
  margin-top: 22rpx; }
  .BGBox .BGImg {
    width: 321rpx;
    height: 321rpx; }
  .BGBox .BGState {
    position: relative;
    background: #000000;
    opacity: 0.5;
    padding: 10rpx 20rpx;
    bottom: 50rpx;
    color: #fff; }

.addBG {
  width: 321rpx;
  height: 321rpx;
  margin-top: 22rpx;
  border: 1rpx dashed #92979d;
  border-radius: 24rpx;
  border-radius: 34rpx; }

.message {
  width: 70rpx;
  height: 70rpx;
  margin-top: 20rpx; }

.title {
  font-size: 32rpx;
  font-weight: 500;
  line-height: 45rpx;
  color: #282b2f; }

.tips {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 33rpx;
  color: #92979d; }

.sendTimeBox {
  width: 686rpx;
  height: 90rpx;
  background: #ffffff;
  border: 1rpx solid #dfe4ea;
  border-radius: 14rpx;
  margin: 24rpx 0; }

*** Open source address:
gitee open source: (https://gitee.com/chengdu-gengzixin_liu-jiyuan/timetable)

This is the end of this article about how to use JS to implement a small program called a class schedule (imitating the Super Class Schedule) and add a custom background function. For more relevant Super Class Schedule content, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • JavaScript implements class lottery applet
  • JavaScript to implement random roll call applet
  • WeChat applet 12 lines of js code to write a slider function yourself (recommended)
  • WeChat applet to obtain mobile phone number JavaScript decryption sample code detailed explanation

<<:  MySQL optimization solution: enable slow query log

>>:  Responsive layout summary (recommended)

Recommend

7 interview questions about JS this, how many can you answer correctly

Preface In JavaScript, this is the function calli...

HTML input box optimization to improve user experience and ease of use

In order to improve user experience and ease of us...

css add scroll to div and hide the scroll bar

CSS adds scrolling to div and hides the scroll ba...

How to install and modify the initial password of mysql5.7.18 under Centos7.3

This article shares with you the installation of ...

Detailed explanation of common operations of Docker images and containers

Image Accelerator Sometimes it is difficult to pu...

CentOS 7.x deployment of master and slave DNS servers

1. Preparation Example: Two machines: 192.168.219...

Nginx+FastDFS to build an image server

Installation Environment Centos Environment Depen...

Summary of the use of Datetime and Timestamp in MySQL

Table of contents 1. How to represent the current...

MySQL 8.0.13 installation and configuration tutorial under CentOS7.3

1. Basic Environment 1. Operating system: CentOS ...

How to install ionCube extension using pagoda

1. First install the pagoda Installation requirem...

A general method for implementing infinite text carousel with native CSS

Text carousels are very common in our daily life....

Tutorial diagram of installing CentOS and Qt in Vmware virtual machine

Vmware Installation Installing Packages Download ...

Vue3+script setup+ts+Vite+Volar project

Table of contents Create a vue + ts project using...

Using JavaScript to implement carousel effects

This article shares the specific code for JavaScr...

Tutorial on installing MySQL on Alibaba Cloud Centos 7.5

It seems that the mysql-sever file for installing...