Announcements banner with scheduling

Creating an Announcements Banner with Scheduling in a portal or website is a great way to communicate important messages to users. You can design a system that allows administrators to create, schedule, and display announcements in a banner that automatically appears based on predefined dates and times.

Step 1: Define the Requirements

Before we dive into implementation, let’s identify the key features you would need:

1. Admin Interface: Where an admin can create and schedule announcements.
2. Announcement Banner: The banner that appears on the website with the message.
3. Scheduling: Ability to set start and end times for the banner.
4. Responsive Design: The banner should look good on both desktop and mobile devices.
5. Automatic Display: The banner should automatically appear and disappear based on the scheduled dates and times.
6. Optional: Ability to control how long the banner stays visible (e.g., closing after a certain period or by user action).

Step 2: Admin Interface for Creating and Scheduling Announcements

To create the announcement, the admin will need a form where they can input the message, select the start and end date/time for when it should appear.

Key Fields in the Admin Form:

• Announcement Title (Text Field)
• Announcement Content (Text Area for the announcement message)
• Start Date and Time (Date/Time Picker)
• End Date and Time (Date/Time Picker)
• Active Status (Checkbox to activate or deactivate an announcement)

Example Form (HTML):

<form id="announcement-form">
  <label for="title">Announcement Title</label>
  <input type="text" id="title" name="title" required>

  <label for="content">Announcement Content</label>
  <textarea id="content" name="content" required></textarea>

  <label for="start-time">Start Time</label>
  <input type="datetime-local" id="start-time" name="start-time" required>

  <label for="end-time">End Time</label>
  <input type="datetime-local" id="end-time" name="end-time" required>

  <label for="active">Active</label>
  <input type="checkbox" id="active" name="active">

  <button type="submit">Save Announcement</button>
</form>

When the form is submitted, it should save the data (e.g., in a database, SharePoint list, or any back-end storage system). The start and end times will control when the announcement is displayed.

Step 3: Front-End (Displaying the Announcement Banner)

Once the announcement is created and scheduled, you need to display the banner based on the scheduled time.

HTML for the Banner:

<div id="announcement-banner" class="hidden">
  <span id="announcement-title"></span>
  <p id="announcement-content"></p>
  <button id="close-banner">Close</button>
</div>

CSS for Styling the Banner:

#announcement-banner {
  background-color: #f39c12;
  color: white;
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 1000;
}

#announcement-banner.hidden {
  display: none;
}

#announcement-banner button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}

The hidden class will hide the banner when it’s not within the scheduled time range.

Step 4: JavaScript for Handling Scheduling Logic

The main task of the JavaScript is to check the current time against the scheduled start and end times for the announcement. If the current time is within the schedule, the banner should appear.

JavaScript Logic:

// Simulating an announcement fetched from the server (e.g., database)
const announcement = {
  title: "Scheduled Maintenance",
  content: "Our system will undergo maintenance from 10:00 PM to 12:00 AM tonight.",
  startTime: new Date("2025-04-23T22:00:00"),  // Scheduled start time
  endTime: new Date("2025-04-23T23:59:59"),    // Scheduled end time
  active: true
};

// Function to check if the current time is within the announcement's schedule
function checkAnnouncement() {
  const now = new Date();

  // Check if current time is within the scheduled range
  if (announcement.active && now >= announcement.startTime && now <= announcement.endTime) {
    document.getElementById('announcement-title').innerText = announcement.title;
    document.getElementById('announcement-content').innerText = announcement.content;
    document.getElementById('announcement-banner').classList.remove('hidden');
  }
}

// Function to close the announcement banner
document.getElementById('close-banner').addEventListener('click', () => {
  document.getElementById('announcement-banner').classList.add('hidden');
});

// Call the checkAnnouncement function when the page loads
window.onload = checkAnnouncement;

This code checks the current date and time when the page loads. If it’s within the scheduled start and end time, it displays the announcement banner. The banner can also be manually closed by the user.

Step 5: Storing Announcements and Schedule in Database

On the back end, you need to store the announcement data, including the message, start time, end time, and status (active or not).

Example Table Structure (Database or SharePoint):

Announcement ID	Title	Content	Start Time	End Time	Active Status
1	Scheduled Maintenance	Our system will undergo maintenance from 10 PM to 12 AM	2025-04-23 22:00:00	2025-04-23 23:59:59	True

The data can be queried dynamically to pull the appropriate announcement to display based on the scheduled times.

Step 6: Automating Banner Display via Backend (Optional)

In addition to displaying the banner on the front-end, the backend can periodically check whether any new announcements are available and update the active status accordingly (e.g., making an announcement inactive after the end time).

Step 7: Testing and Debugging

Test the announcement system thoroughly by setting different time schedules:

• Test with announcements that should be visible.
• Test with past and future scheduled times.
• Test for handling edge cases, such as time zone differences and daylight saving time.