System Clock and Calendar

Display the system clock and calendar at the bottom right corner of the site in Chrome browser.

  1. // ==UserScript==
  2. // @name System Clock and Calendar
  3. // @description Display the system clock and calendar at the bottom right corner of the site in Chrome browser.
  4. // @namespace https://github.com/Rainman69/
  5. // @version 1.0
  6. // @author https://t.me/TheErfon
  7. // @match *://*/*
  8. // @grant none
  9. // @license CC BY-NC-ND 4.0
  10. // @licenseURL https://github.com/Rainman69/live-Time-date-for-browser/blob/main/LICENSE
  11. // ==/UserScript==
  12.  
  13. (function() {
  14. 'use strict';
  15.  
  16. var systemDateDiv = document.createElement('div');
  17. systemDateDiv.style.position = 'fixed';
  18. systemDateDiv.style.bottom = '0';
  19. systemDateDiv.style.right = '0';
  20. systemDateDiv.style.width = '40%';
  21. systemDateDiv.style.padding = '5px';
  22. systemDateDiv.style.fontFamily = 'digital-7 (mono)';
  23. systemDateDiv.style.fontSize = '12px';
  24. systemDateDiv.style.textAlign = 'center';
  25. systemDateDiv.style.zIndex = '9999';
  26. systemDateDiv.style.textShadow = '0px -2px 4px rgba(0, 0, 0, 0.3)';
  27. systemDateDiv.style.transition = 'opacity 0.5s ease-in-out';
  28.  
  29. function updateTime() {
  30. var currentDate = new Date();
  31. var options = { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: true };
  32. var formattedDate = currentDate.toLocaleString('en-US', options);
  33.  
  34. systemDateDiv.textContent = formattedDate;
  35. }
  36.  
  37. function handleScroll() {
  38. if (isScrolling) {
  39. clearTimeout(scrollingTimer);
  40. } else {
  41. systemDateDiv.style.opacity = '0';
  42. }
  43.  
  44. isScrolling = true;
  45.  
  46. scrollingTimer = setTimeout(function() {
  47. isScrolling = false;
  48. systemDateDiv.style.opacity = '1';
  49. }, 1000);
  50. }
  51.  
  52. var isScrolling = false;
  53. var scrollingTimer;
  54.  
  55. updateTime();
  56.  
  57. window.addEventListener('scroll', handleScroll);
  58.  
  59. document.body.appendChild(systemDateDiv);
  60.  
  61. // Update the time every second
  62. setInterval(updateTime, 1000);
  63. })();