I am working on this SPFx web part @ https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/js-modern-calendar.

Now when I click on a event inside the calendar, I will get this dialog box with a blue OK button:

enter image description here

I am trying to change the background color for the button from blue to red, So I tried to modify the following .scss files:

enter image description here

But still the button is been displayed in blue, any advice?

1 Answer 1


This modern calendar SPFx web part sample uses sweetalert2 library for showing dialog/popup.

"OK" button on dialog inherits CSS from sweetalert2.min.css file.

To change the background color of OK button, you have to override the below CSS classes in your web part CSS:

enter image description here

Follow below steps:

  1. Create swal-override.scss file inside modernCalendar folder

  2. Add below CSS in swal-override.scss file:

    button.swal2-confirm {
        background-color: red !important;
  3. import this file in ModernCalendarWebPart.ts file using:

    import './swal-override.scss';

Update from comments:

If above CSS is not working for you, try adding confirmButtonColor: "#FF0000" inside modalOptions in ModernCalendarWebPart.ts file.

For example:

let modalOptions: swalalert.SweetAlertOptions = {
  title: _event.title,
  html: eventDetail,
  showCloseButton: true,
  width: '800px',
  confirmButtonText: "OK",
  confirmButtonColor: "#FF0000"

  • so did yo add the custom css inside the .EmptyCalendar main class?
    – John John
    Jul 16, 2022 at 13:52
  • 1
    Try adding it inside .EmptyCalendar at the end/bottom side. If it is not working for you, add it outside of this block. Jul 16, 2022 at 14:24
  • what you did in your case? as you provided a screen shot of the result. thanks
    – John John
    Jul 16, 2022 at 14:35
  • your code did not work for me,i tried placing the css inside multiple locations but nothing changed
    – John John
    Jul 16, 2022 at 14:44
  • 1
    In SPFx, I use separate CSS files to override library CSS with my custom styling. Check updated answer & let me know if this works for you. Jul 17, 2022 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.